您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)怎么在Vue中自定義使用過濾器,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
1、過濾器的用法,用 ‘|' 分割表達式和過濾器。
例如:{{ msg | filter}} {{msg | filter(a)}} a就標識filter的一個參數(shù)。
用兩個過濾器:{{msg | myfilter | myfilternumber }}
2、自定義的過濾器
過濾器的結(jié)構(gòu)為:Vue.filter("id",function(value,a){});
value是過濾器的一個參數(shù),也是默認的原始值。a是自定義的一個參數(shù)。
自定義過濾器的例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style> </style> </head> <body> <div id="app"> <!--輸出的字符串中a的個數(shù)--> <span>msg的值:{{msg}},其中a的個數(shù):</span> {{msg | myfilter('a')}} <br> <!--輸出的字符串中b的個數(shù)--> <span>msg的值:{{msg}},其中b的個數(shù):</span> {{msg | myfilter | myfilternumber}} </div> </body> <script type="text/javascript"> Vue.filter("myfilter", function(value, arg) { //返回一個對象或者json字符串,列出字符串中的字符以及字符的個數(shù),不區(qū)分大小寫 var obj = {}; var s = value.split('').sort().join(""); var reg = /(.)\1+/ig; var str = s.replace(reg, "$1"); //字符串去重后的結(jié)果 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>
看完上述內(nèi)容,你們對怎么在Vue中自定義使用過濾器有進一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。