學習筆記：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>

效果：