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