Vue3不支持Filters过滤器的问题
更新时间：2020年09月24日 10:18:53 作者：前端精髓
这篇文章主要介绍了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>
官方建议用计算属性或方法代替过滤器，而不是使用过滤器。
到此这篇关于Vue3不支持Filters过滤器的问题的文章就介绍到这了,更多相关Vue3 Filters过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
以前我们经常在react中使用jsx，现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于Vue3使用JSX的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理，返回需要的结果。这篇文章主要给大家介绍vue 过滤器filter实例，感兴趣的朋友跟随脚本之家小编一起学习吧2018-03-03
最近尝试上手Vue3+TS+Vite,对比起Vue2有些不适应,但还是真香,下面这篇文章主要给大家介绍了关于vue3+ts+vite2项目的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
本文详细介绍了在Vue框架中使用el-tree组件创建横向滚动条的方法,通过代码示例和步骤说明,帮助开发者理解和实现横向滚动功能,感兴趣的可以了解一下2024-09-09
vue如何设置输入框只能输入数字且只能输入小数点后两位,并且不能输入减号
这篇文章主要介绍了vue如何设置输入框只能输入数字且只能输入小数点后两位,并且不能输入减号问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
大家都知道，Vuejs的 CLI工具 是基于 webpack 来实现的，所以在项目打包后，会生成的文件会很大。 主要原因是 webpack 将我们所有文件都打包成一个js文件，即使再小的项目，打包之后文件都会变得很大。 下面讲讲最近我遇到的相同问题。2020-02-02
这篇文章主要介绍了Vue学习笔记之计算属性与侦听器用法,结合实例形式详细分析了vue.js计算属性与侦听器基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue3的ref是如何实现响应式的,我们讲了ref是如何实现响应式的,主要分为两种情况：ref接收的是number这种原始类型、ref接收的是对象这种非原始类型,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了在vue中使用公共过滤器filter的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
本篇文章主要介绍了Vue.js通用应用框架-Nuxt.js的上手教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论