Vue2中的过滤器filter使用及注意说明_vue.js_

Vue2中的过滤器是什么

什么是vue的过滤器

过滤器可以通俗理解成是一个特殊的方法，用来加工数据的

比如枚举值可以使用过滤器：如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器，将价格格式化成小数点两位 比如时间格式化等，又比如可以过滤聊天中的某些脏话

过滤器怎么写

过滤器基本使用
 // 
 {{content|contentFilter}} 
 // 
11
过滤器接收参数
 {{ num1| add(num2,num3)}} 

Vue.filter('contentFilter', function (value) { //全局过滤器 if (!value) { return "" } return value.toUpperCase().replace('TMD', '*不许说脏话噢*').replace('SB', '*不许说脏话噢*') }) Vue.filter("addZero",function(value){ // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值 return value<10?"0"+value:value; }); new Vue({ el: '#app', data: { content: '小伙子,TMD就是个sb', num1: 40, num2: 60, num3: 70, }, filters: { //局部过滤器(本地过滤器) add(n1, n2, n3) { return n1 + n2 + n3 } } }) 

注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器

局部过滤器优先于全局过滤器被调用

一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

注意filter方法在vue3中已被废除

vue3要精简代码，并且filter功能重复，filter能实现的功能，methods和计算属性基本上也可以实现。把filter这方面的vue源码给删掉，这样更加方便维护。

例如

使用computed实现

使用methods实现

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！