本章主要讲vue2的过滤器的使用
1.先介绍下vue1与vue2的filter区别，也就是vue2更新的地方
a: 2.0将1.0所有自带的过滤器都删除了，也就是说，在2.0中，要使用过滤器，则需要我们自己编写。
b: 2.0过滤器的传参方式不是以前的方式，是以函数传参的方式，下面示例（后面有具体示例）：
之前调用: {{msg | mimi '12' '5'}}
现在调用: {{msg | mimi('12','5')}} c: 移除双向过滤器：
Vue.filter('change', {
read: function (val) {
return val
},
write: function (val, oldVal) {
return isEmail(val) ? val : oldVal
}
})
2.组件内部过滤（此例子写法适用于处理数据显示的样式，不会改变原数据）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>filter</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <!--添加两个过滤器,注意不要冲突,注意先后顺序--> <li v-for="item in list">{{item.id | filterAdd1 | filterAdd2}}</li> </ul> </div> </body> <script> var vm = new Vue({ el:'#app', data(){ return { list:[ {"id":0,"title":"11111","cont":"111111"}, {"id":1,"title":"22222","cont":"111111"}, {"id":2,"title":"33333","cont":"111111"}, {"id":3,"title":"44444","cont":"111111"}, ] } }, filters:{ filterAdd1(item) { return item+10; }, filterAdd2(item) { return '$'+item; } }, methods:{ }, mounted(){ } }) </script> </html>
3.注册在全局的fliter，filter传值，filter动态传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>filter</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <!--添加两个过滤器,注意不要冲突,注意先后顺序--> <!-- 过滤传值，带引号的是字符串，不带是number,传的值可以动态绑定--> <li v-for="item in list">{{item.id | filterAdd1(Number(input),20) | filterAdd2}}</li> </ul> <input type="text" placeholder="place" v-model="input"> </div> </body> <script> Vue.filter('filterAdd1', function (value,one,two) { return value+one+two;//默认第一个参数就是默认要过滤的那个值 }) Vue.filter('filterAdd2', function (value) { return '$'+value; }) var vm = new Vue({ el:'#app', data(){ return { input:5, list:[ {"id":0,"title":"11111","cont":"111111"}, {"id":1,"title":"22222","cont":"111111"}, {"id":2,"title":"33333","cont":"111111"}, {"id":3,"title":"44444","cont":"111111"}, ] } }, methods:{ }, mounted(){ } }) </script> </html>
结果：
4. 计算属性筛选，methods方法筛选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- <script src="vue.js"></script> --> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div @click="addMore">加载更多</div> <ul><li v-for="item in filterlist">{{item}}</li></ul> <hr> <ul><li v-for="item in filterlistFun()">{{item}}</li></ul> </div> </body> <script> var vm = new Vue({ el:'#app', data(){ return { size:5, list:[ {"id":0,"title":"11111","cont":"111111"}, {"id":1,"title":"22222","cont":"111111"}, {"id":2,"title":"33333","cont":"111111"}, {"id":3,"title":"44444","cont":"111111"}, {"id":4,"title":"55555","cont":"55555"}, {"id":5,"title":"66666","cont":"66666"}, {"id":6,"title":"77777","cont":"77777"}, {"id":7,"title":"77777","cont":"88888"}, {"id":8,"title":"888888","cont":"999999"}, {"id":9,"title":"000000","cont":"99999"}, {"id":10,"title":"a88888","cont":"99999"}, {"id":11,"title":"a22222","cont":"111111"}, {"id":12,"title":"a33333","cont":"111111"}, {"id":13,"title":"a44444","cont":"111111"}, {"id":14,"title":"a55555","cont":"55555"}, {"id":15,"title":"a66666","cont":"66666"}, {"id":16,"title":"a77777","cont":"77777"}, {"id":17,"title":"a77777","cont":"88888"}, {"id":18,"title":"a888888","cont":"999999"}, {"id":19,"title":"a000000","cont":"99999"}, {"id":20,"title":"a88888","cont":"99999"} ] } }, computed: { filterlist () { let num=this.size; return this.list.filter(function (number) { return number.id < num }) } }, methods:{ filterlistFun(val){ let num=this.size; return this.list.filter(function (number) { return number.id < num }) }, addMore(){ this.size+=5; }, }, mounted(){ } }) </script> </html>