vueカスタムフィルタの作成と使用
1390 ワード
フィルタの役割:データのフィルタリング、フィルタリング、フォーマットを実現します.
vue1.*バージョンは内蔵のフィルタがありますが、vue 2.*すべてのバージョンには、独自のフィルタがありません.
1、フィルタ作成フィルタの本質は、パラメータと戻り値のある方法new Vue({filters:{myCurrency:function(myInput){return処理後のデータ})である.
2、フィルタ使用文法:{{式|フィルタ}}例:{{price|myCurrency}}
3、フィルターの使い方
フィルタを使用する場合は、パラメータを指定して、フィルタにパラメータに従ってデータのフィルタリングを行うように伝えることもできます.
①フィルターにどのように伝えますか?{{price|myCurrency('¥',true)}②フィルタでどのように受信しますか?新Vue({filters:{//myInputはパイプを介して送られてきたデータ//arg 1フィルタを呼び出すときにカッコ内の最初のパラメータ//arg 2フィルタを呼び出すときにカッコ内の2番目のパラメータmyCurrency:function(myInput,arg 1,arg 2){returnで処理されたデータ}
}
})
Demo:金額千分位フォーマット
vue1.*バージョンは内蔵のフィルタがありますが、vue 2.*すべてのバージョンには、独自のフィルタがありません.
1、フィルタ作成フィルタの本質は、パラメータと戻り値のある方法new Vue({filters:{myCurrency:function(myInput){return処理後のデータ})である.
2、フィルタ使用文法:{{式|フィルタ}}例:{{price|myCurrency}}
3、フィルターの使い方
フィルタを使用する場合は、パラメータを指定して、フィルタにパラメータに従ってデータのフィルタリングを行うように伝えることもできます.
①フィルターにどのように伝えますか?{{price|myCurrency('¥',true)}②フィルタでどのように受信しますか?新Vue({filters:{//myInputはパイプを介して送られてきたデータ//arg 1フィルタを呼び出すときにカッコ内の最初のパラメータ//arg 2フィルタを呼び出すときにカッコ内の2番目のパラメータmyCurrency:function(myInput,arg 1,arg 2){returnで処理されたデータ}
}
})
Demo:金額千分位フォーマット
: {{MoneyList.consumeMoney | moneyToPoint(MoneyList.consumeMoney,2)}}
filters:{
moneyToPoint:function(s,n){
n = n > 0 && n <= 20 ? n : 2;
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
let l = s.split(".")[0].split("").reverse(),
r = s.split(".")[1];
let t = "";
for (let i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
return t.split("").reverse().join("") + "." + r;
}
}