本文實例為大家分享了vue自定義過濾器創建和使用方法，供大家參考，具體內容如下
過濾器：生活中有很多例子，凈水器 空氣凈化器 。
過濾器的作用：實現數據的篩選、過濾、格式化。
vue1.*版本是有內置的過濾器，但是在vue2.*所有的版本都已經沒有自帶的過濾器了。
1、過濾器創建
過濾器的本質 是一個有參數 有返回值的方法
new Vue({ filters:{ myCurrency:function(myInput){ return 處理后的數據 } } })2、過濾器使用
語法：
<any>{{表達式 | 過濾器}}</any>
舉個例子：
<h1>{{price | myCurrency}}</h1>
3、過濾器高級用法
在使用過濾器的時候，還可以指定參數，來告訴過濾器按照參數進行數據的過濾。
①如何給過濾器傳參？
<h1>{{price | myCurrency('￥',true)}}</h1>
②如何在過濾器中接收到？
new Vue({ filters:{ //myInput是通過管道傳來的數據 //arg1在調用過濾器時在圓括號中第一個參數 //arg2在調用過濾器時在圓括號中第二個參數 myCurrency:function(myInput,arg1,arg2){ return 處理后的數據 } }})代碼：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title></title></head><body><div id="container"> <p>{{msg}}</p> <h1>{{price}}</h1> <h1>{{price | myCurrency('￥')}}</h1></div><script> // filter new Vue({ el: '#container', data: { msg: 'Hello Vue', price:356 }, //過濾器的本質 就是一個有參數有返回值的方法 filters:{ myCurrency:function(myInput,arg1){ console.log(arg1); //根據業務需要，對傳來的數據進行處理 // 并返回處理后的結果 var result = arg1+myInput; return result; } } })</script></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title></title></head><body><div id="container"> <p>{{msg}}</p> <h1>{{name | myTextTransform(false)}}</h1></div><script> new Vue({ el: '#container', data: { msg: 'Hello Vue', name:'Michael' }, filters:{ myTextTransform: function (myInput,isUpper) { if(isUpper) { return myInput.toUpperCase(); } else{ return myInput.toLowerCase(); } } } })</script></body></html>
新聞熱點
疑難解答
圖片精選
