vue--過濾器

1.Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示：

2.目的：用於文本轉換

3.代碼

html+vue

<!--產品單價-->
<div class="cart-tab-2">
<!--引用局部過濾器-->
   <div class="item-price">{{ item.productPrice | formatMoney}}</div>
</div>
<!--總金額-->
<div class="cart-tab-4">
<!--引用全局過濾器-->
<!--過濾器傳參方法---名稱:('參數')-->
   <div class="item-price-total">{{item.productPrice*item.productQuantity |                money('元')}}</div>
</div>

json數據

{
    "status":1,
    "result":{
      "totalMoney":109,
      "list":[
        {
          "productId":"600100002115",
          "productName":"黃鶴樓香菸",
          "productPrice":19,
          "productQuantity":1,
          "productImage":"static/img/goods-1.jpg",
          "parts":[
            {
              "partsId":"10001",
              "partsName":"打火機",
              "imgSrc":"static/img/part-1.jpg"
            },
            {
              "partsId":"10002",
              "partsName":"打火機",
              "imgSrc":"static/img/part-1.jpg"
            }
          ]
        },
}

js內容

new Vue({
  el: '#app',
  data: {
    totalMoney: 0,
    productList: []
  },
  //局部過濾器
  //過濾器名字爲formatMoney
  //引用局部過濾器：只能在id=app的div中調用
  filters: {
  //傳入value參數
      formatMoney:function (value) {
    //在文本之前加"￥"字符串，在文本後精確到兩位小數
          return "￥"+value.toFixed(2)
      }
  },
  mounted: function() {
      this.$nextTick(function () {
          this.cartView()
      })
  })
  },
  methods: {
      cartView: function() {
        var _this = this;
        this.$http.get("data/cartData.json", {"id": 123}).then(function(res) {
          _this.productList = res.body.result.list;
          _this.totalMoney =  res.body.result.totalMoney;
        });
      }
       }
    }
});
//全局過濾器
//過濾器名字爲money
//能在所有實例中使用
//傳入兩個參數value、type，type參數要在html中調用
Vue.filter("money",function (value,type) {
    return "￥"+value.toFixed(2)+type
})

定義在全局就能在所有的實例中調用過濾器，如果定義在了實例裏就在實例裏調用過濾器。

我們一般不在前端中設置小數的位數，因爲JS有精度丟失