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有精度丢失