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