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>

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 下标「建议收藏」

    下标「建议收藏」下标下标可以定义在类、结构体和枚举中,是访问集合、列表或序列中元素的快捷方式。可以使用下标的索引,设置和获取值,而不需要再调用对应的存取方法。举例来说,用下标访问一个Array实例中的元素可以写

  • 圆桌排列组合问题_圆桌相邻概率

    圆桌排列组合问题_圆桌相邻概率假设有来自 m 个不同单位的代表参加一次国际会议。每个单位的代表数分别为 ri(i=1,2,…,m)。会议餐厅共有 n 张餐桌,每张餐桌可容纳 ci(i=1,2,…,n) 个代表就餐。为了使代表们充分交流,希望从同一个单位来的代表不在同一个餐桌就餐。试设计一个算法,给出满足要求的代表就餐方案。输入格式第 1 行有 2 个正整数 m 和 n,m 表示单位数,n 表示餐桌数。第 2 行有 m 个正整数,分别表示每个单位的代表数 ri。第 3 行有 n 个正整数,分别表示每个餐桌的容量 ci。输

  • 《剑指offer》– 树的子结构、二叉树的镜像、二叉树的深度、平衡二叉树

    《剑指offer》– 树的子结构、二叉树的镜像、二叉树的深度、平衡二叉树

  • navicat15激活码最新【最新永久激活】

    (navicat15激活码最新)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html70YZDJVTFP-eyJsaWNlbnNlSW…

  • 用matlab画一元二次函数图像_matlab绘制二元函数的三维图

    用matlab画一元二次函数图像_matlab绘制二元函数的三维图二元函数可以用mesh或者surf函数画图。下面举例说明:[X,Y]=meshgrid(-8:.5:8);Z=sqrt(X.^2+Y.^2);mesh(X,Y,Z)图像如下:觉得有帮助就采纳吧www.mh456.com防采集。^subplot221fimplicit3(@5261(x,y,z)x.^41022+y.^2-z)title(‘z=x^2+1653y^2’)subplot222…

  • win10系统显示打印机未连接到服务器,解决win10提示“Windows无法连接到打印机”的方法…

    win10系统显示打印机未连接到服务器,解决win10提示“Windows无法连接到打印机”的方法…打印机是我们办公室中必备的设备,如今各种打印方式也是层出不穷。最近有用户在使用win10系统进行打印的时候遇到了这样的提示信息:“windows无法连接到打印机”。在更详细的信息提示界面中已经告诉我们是由于本地打印店额后台服务程序没有启用导致的,少数用户在将电脑重新启动之后解决了这个问题,不过大多数的朋友还是得通过手动重启服务才能开始打印。如何才能手动设置这个服务呢,让小编来给大家演示一下吧!方…

发表回复

您的电子邮箱地址不会被公开。

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