1、過濾器的用法,用 ‘|' 分割表達式和過濾器。
例如：{{ msg | filter}} {{msg | filter(a)}} a就標識filter的一個參數。
用兩個過濾器：{{msg | myfilter | myfilternumber }}
2、自定義的過濾器
過濾器的結構為：Vue.filter("id",function(value,a){});
value是過濾器的一個參數，也是默認的原始值。a是自定義的一個參數。
自定義過濾器的例子：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style> </style></head><body> <div id="app"> <!--輸出的字符串中a的個數--> <span>msg的值：{{msg}},其中a的個數：</span> {{msg | myfilter('a')}} <br> <!--輸出的字符串中b的個數--> <span>msg的值：{{msg}},其中b的個數：</span> {{msg | myfilter | myfilternumber}} </div></body><script type="text/javascript"> Vue.filter("myfilter", function(value, arg) { //返回一個對象或者json字符串，列出字符串中的字符以及字符的個數,不區分大小寫 var obj = {}; var s = value.split('').sort().join(""); var reg = /(.)/1+/ig; var str = s.replace(reg, "$1"); //字符串去重后的結果 var i = 0, n, a; while (s.length > 0) { a = str.charAt(i); n = s.lastIndexOf(a) + 1; obj[a] = n; s = s.substring(n); i++; } return arg ? obj[arg] : obj; }); Vue.filter("myfilternumber", function(value) { return value.b; }); var app1 = new Vue({ el: "#app", data: { msg: "a1a1aba2babac" }, methods: { } });</script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
