本章主要講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>