Vue3不支持Filters过滤器

Vue3不支持Filters过滤器filters过滤器已从Vue3.0中删除,不再支持。2.x语法在2.x中,开发人员可以使用过滤器来处理常见的文本格式。<template><h1>BankAccountBalance</h1><p>{{accountBalance|currencyUSD}}</p></template><script>exportdefault{props:{a.

大家好,又见面了,我是你们的朋友全栈君。

Vue3不支持Filters过滤器

filters过滤器已从Vue 3.0中删除,不再支持。

2.x 语法

在2.x中,开发人员可以使用过滤器来处理常见的文本格式。

<template>
  <h1>Bank Account Balance</h1>
  <p>{ 
   { 
    accountBalance | currencyUSD }}</p>
</template>

<script>
  export default { 
   
    props: { 
   
      accountBalance: { 
   
        type: Number,
        required: true
      }
    },
    filters: { 
   
      currencyUSD(value) { 
   
        return '$' + value
      }
    }
  }
</script>

虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式“只是JavaScript”的原则,这既增加了学习成本,也增加实现逻辑的成本。

3.x 更新

在3.x中,过滤器被删除,不再受支持。相反,我们建议用方法调用或计算属性替换它们。

下面的例子是一个实现类似功能的。

<template>
  <h1>Bank Account Balance</h1>
  <p>{ 
   { 
    accountInUSD }}</p>
</template>

<script>
  export default { 
   
    props: { 
   
      accountBalance: { 
   
        type: Number,
        required: true
      }
    },
    computed: { 
   
      accountInUSD() { 
   
        return '$' + this.accountBalance
      }
    }
  }
</script>

官方建议用计算属性或方法代替过滤器,而不是使用过滤器。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143522.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • MacPorts_mac查看使用电脑时间

    MacPorts_mac查看使用电脑时间1.MacPort中第三方软件下载包存放的默认路径是:/opt/local/var/macports/distfiles/为了提高安装速度,可以在安装新port时直接将此目录下的文件拷贝到新的MacPort相同的目录中就可以避免Port去网上下载。2.使用MacPort前应该首先更新Port的index输入:$ sudoport-vselfupdate (强烈推荐第一

    2022年9月21日
  • SQL NOT NULL 约束[通俗易懂]

    SQL NOT NULL 约束[通俗易懂]SQLNOTNULL约束在默认的情况下,表的列接受NULL值。SQLNOTNULL约束NOTNULL约束强制列不接受NULL值。NOTNULL约束强制字段始终包含值。这意味着,如果不向字段添加值,就无法插入新记录或者更新记录。下面的SQL强制“P_Id”列和“LastName”列不接受NULL值:CREATETABLEPersons(…

    2022年5月29日
  • vuex中mapGetters「建议收藏」

    vuex中mapGetters「建议收藏」vuex为了更快捷解决组件之间相互传值问题不划分模块结构目录index.js:importVuefrom’vue’importVuexfrom’vuex’importrouterfrom’@/router’import{getToken,setToken,removeToken}from’@/common/utils/auth’import{getInfo,getDeptUserTreeList,initGetToke…

    2022年6月6日
  • 全排列 leetcode_leetcode top100

    全排列 leetcode_leetcode top100原题链接给定一个 没有重复 数字的序列,返回其所有可能的全排列。示例:输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]]题解回溯即可class Solution {public: vector<vector<int> >res; vector<int>t; void dfs(int num,int len,vecto

    2022年8月8日
  • 什么是宽字节注入_百分号两个字节

    什么是宽字节注入_百分号两个字节宽字节注入原理:宽字节(两字节)带来的安全问题主要是吃ASCII字符(一字节)的现象,使用一些特殊字符来”吃掉“经过转义符“\”。在重新详细了解宽字节注入之前,我认为宽字节注入只是出现在网站使用GBK编码的时代,现在已经很少出现了,但是实际上宽字节不只是出现在GBK编码中。在PHP中,通过iconv()进行编码转换时,也可能出现宽字节注入。还有一个误区:这里的编码问题不是出现在HTML页面…

    2022年10月15日
  • Gitlab-CICD最简单明了的入门教程

    Gitlab-CICD最简单明了的入门教程CICD是什么?由于目前公司使用的gitlab,大部分项目使用的CICD是gitlab的CICD,少部分用的是jenkins,使用了gitlab-ci一段时间后感觉还不错,因此总结一下介绍gitlab的CICD之前,可以先了解CICD是什么我们的开发模式经历了如下的转变:瀑布模型->敏捷开发→DevOps(Development、Operations的组合词,是一组过程、方法与系统的统称)后来随着DevOps的兴起,出现了持续集成(ContinuousIntegration)、持续交付(Co

    2022年6月3日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号