学习笔记：Vue过滤器使用极简介绍及demo

今天给大家言简意赅的讲讲Vue过滤器的使用，直接整

过滤器

我们今天要用过滤器来实现金额的转化

案栗：比如：一款商品的价格是32800分，我们需要把它抓化成元并且加上两位小数点和“￥”符号

 解答：

 

 先看看js部分：我们先定义一个filters:{}，它是和data(){}平级的，同时在里面定义一个函数price_change，函数有个val入参，它代表你要处理的对象。

export default {
  data() {
    return {}
  },
  filters: {
    price_change(val) {
      return val/100.toFixed(2) + "￥"  //把分转化成元  先除以100 ，toFixed(2)保留两位小数 
    }
  },
}

再看html部分，你需要在对应的价格dom上添加 | price_change也就是方法名，这么简单，你学会了吗？

  <div class="price">
     <span class="now">{{goods.price | price_change}}</span>                  
  </div>

效果：