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:金額千分位フォーマット
   : {{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;
        }
    }