本文實例為大家分享了Vue filters過濾器使用，供大家參考，具體內容如下

實例

先來看看一段代碼理解下

html

<div id="app">  {{message | filters2| filters3(true,priceCount)}}</div>

js

var app = new Vue({  el: "#app",  data: {    message: 199,    priceCount:.8  },  filters:{    filters2:function (arg) {      console.log("arg:"+arg)      if(arg>100){        return arg-8;      }else {        return arg;      }    },    filters3:function (arg_1,arg_2,arg_3) {      var result;      console.log("arg_1:"+arg_1)      console.log("arg_2:"+arg_2)      console.log("arg_3:"+arg_3)      if(arg_2){        result = arg_1*arg_3;        console.log("result"+result);        return result;      }else{        result =arg_1;        console.log("result"+result);        return result      }    }  }});

控制臺日志

helloVue.js:17 arg:199
helloVue.js:26 arg_1:191
helloVue.js:27 arg_2:true
helloVue.js:28 arg_3:0.8
helloVue.js:35 result152.8

先來看看兩個過濾器的入參

第一個過濾器filters2的入參是199，是Vue實例中綁定的message
第二個過濾器filters3的入參是191、（第一個過濾器返回的值）false（第二個過濾器的第一個入參）、0.8（第二個過濾器的第二個入參）

1、Vue實例中的message是199
2、第一個過濾器，大于100的數減8（理解為滿100減8），199-8=191傳給第二個過濾器作為第一個參數
3、第二個過濾器，有兩個入參，第一個是boolean值（理解為是否打折），第二個是0.8（折扣）。

當第一個入參為true的時候(表示需要打折)，191*0.8=152.8（0.8為折扣）

總結

通過過濾器filters我們可以根據業務場景對數據進行處理。

如上一個例子，可以理解成如下業務場景。

1、當商品價格大于100時，可以減8塊錢
2、當店鋪做活動的時候可以進行打折促銷（0.8）
3、最后展示的數值就是用戶需要支付的金額

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。