欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue filters過濾器的使用方法

 更新時(shí)間：2017年07月14日 11:10:26   作者：qq_18837459  
這篇文章主要為大家詳細(xì)介紹了Vue filters過濾器的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue filters過濾器使用，供大家參考，具體內(nèi)容如下

實(shí)例

先來看看一段代碼理解下

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

先來看看兩個(gè)過濾器的入?yún)?

第一個(gè)過濾器filters2的入?yún)⑹?99，是Vue實(shí)例中綁定的message
第二個(gè)過濾器filters3的入?yún)⑹?91、（第一個(gè)過濾器返回的值）false（第二個(gè)過濾器的第一個(gè)入?yún)ⅲ?.8（第二個(gè)過濾器的第二個(gè)入?yún)ⅲ?/p>

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

當(dāng)?shù)谝粋€(gè)入?yún)閠rue的時(shí)候(表示需要打折)，191*0.8=152.8（0.8為折扣）

總結(jié)

通過過濾器filters我們可以根據(jù)業(yè)務(wù)場景對數(shù)據(jù)進(jìn)行處理。

如上一個(gè)例子，可以理解成如下業(yè)務(wù)場景。

1、當(dāng)商品價(jià)格大于100時(shí)，可以減8塊錢
2、當(dāng)?shù)赇佔(zhàn)龌顒拥臅r(shí)候可以進(jìn)行打折促銷（0.8）
3、最后展示的數(shù)值就是用戶需要支付的金額

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論