vue filter的四种用法
vue filter的四种用法 先介绍下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 } }) 1.组件内部过滤(此例子写法适用于处理数据显示的样式,不会改变原数据) <!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> 2.注册在全局的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> 结果: 3. 计算属性筛选,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> 4.使用js中的迭代函数filter 实例一原文 var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)" ], key: "" }, computed: { filterShoppingList: function () { // `this` points to the vm instance var key = this.key; var shoppingList = this.shoppingList; //在使用filter时需要注意的是,前面调用的是需要使用filter的数组,而给filter函数传入的是数组中的每个item,也就是说filter里面的函数,是每个item要去做的,并将每个结果返回。 return shoppingList.filter(function (item) { return item.toLowerCase().indexOf(key.toLowerCase()) != -1 });; } } }) <ul> Filter Key<input type="text" v-model="key"> <li v-for="item in filterShoppingList"> {{ item }} </li> </ul> 最终效果实现了根据关键字来过滤列表的功能。 其他的一些Js 迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf() ———————————————— 版权声明:本文为CSDN博主「ruanhongbiao」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qappleh/article/details/89639948