程序员必懂小知识之Vue中的过滤器
前言
大家好,我是_Peach,今天来分享下Vue中的过滤器小知识
什么是过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)。
如何使用过滤器
全局过滤器
本案例是过滤价格中的¥和元
示例 ¥1999.00元
定义一个capitalize方法,传入value值
如果value为空返回空字符串
否则就叠加字符串"¥" "元" ,这里的toFixed(2)四舍五入为指定小数位数
使用方法
//main.js Vue.filter("capitalize", function (value) { if (!value) return ""; return "¥" + value.toFixed(2) + "元"; }); 复制代码
在双花括号中使用
<!-- home.vue --> <h1>Vue过滤器</h1> <p>{{ price | capitalize }}</p> {{ 20.6664376486 | capitalize }} 复制代码
在
v-bind
中使用
<h1>Vue过滤器</h1> <p :id="122 | capitalize"></p> 复制代码
局部过滤器
这里注意下
当全局过滤器和局部过滤器重名时,会采用局部过滤器。
局部过滤器可以在一个组件的选项中定义本地的过滤器:
export default { name: 'index', data() { return { price: 1999 } }, filters: { capitalize: function (value) { if (!value) return '' return '¥' + value.toFixed(2) + '元' } } } 复制代码
过滤器可以串联
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
,将 filterA
的结果传递到 filterB
中。
{{ message | filterA | filterB }}
作者:_Peach
链接:https://juejin.cn/post/7017633563734441991