Vue案例引起的「過濾器」的使用

最近在項目的開發中，出現一些格式化數據的狀況，好比字母的大小寫，好比一些價格的數據格式。等等一些格式的顯示。

Name	Price
BTC	$3896.23
ETH	$136.64

在上面的表格中，咱們須要處理數據的顯示。這是咱們時常遇到的狀況。

一般咱們會直接處理數據的輸出，能夠這麼作。

computed: {
    result() {
      return this.prices.map(price => "$" + price);
    }
}
複製代碼

這些都是經過修改數據作到的。

不過，Vue 中給咱們提供了一種格式化數據功能「過濾器」。

filters 與 計算屬性（computed），方法（methods）不一樣的是，filters 不會修改數據，只是改變用戶看到的輸出。Vue 從 2.0 版本以後去除了內置的「過濾器」。因此咱們在使用時須要本身去定義。

接下來，咱們就來看看看在 Vue 中如何使用「過濾器」。

首先過濾器能夠用在兩個地方：差值表達式 {{ }} 和 v-bind 表達式，而後由管道操做符「 | 」進行指示。

知道在什麼地方時候，那咱們就再來看看如何定義過濾器。咱們有兩種方式定義。

本地過濾器

咱們能夠把過濾器定義在當前使用的組件內。咱們利用過濾器來修改上面的表格輸出格式。

{{price.price | currency}}

filters: {
    currency(value) {
      return "$" + value;
    }
}
複製代碼

全局過濾器

這裏須要注意的是，使用全局過濾器時，必需要在 Vue 的實例以前。

Vue.filter("currency", function (value) {
  return "$" + value;
});


new Vue({
 //...
})
複製代碼

此時，咱們就能夠愉快的在組件中使用過濾器了。

用戶體驗是很是重要的一個環節，咱們能夠利用過濾器去優化。一般利用表格展現數據時，你沒法保證每一個字段的屬性值都是存在且合理的。

這時就能夠利用「過濾器」。把不合理的值顯示爲 「--」，這是最爲常見的手段。

filters: {
    filterPrice(value) {
      return value ? value : "--";
    }
}
複製代碼

過濾器參數

過濾器會把表達式中的值始終看成函數的第一個參數。因爲過濾器是一個函數，因此咱們也能夠額外的傳入參數。

{{ data | filterPrice(arg1, arg2) }}
複製代碼

好比咱們把上面的案例修改一下，咱們不單單須要把美圓格式化，咱們還須要格式化人民幣等等，不少種的符號，這時就能夠利用傳參的方式。

{{price.price | filterPrice('$')}}

filters: {
    filterPrice(price, prefix) {
      return prefix + price;
    }
}
複製代碼

除此以外，「過濾器」還能夠進行串聯使用。

{{ data | filterA | filterB }}
複製代碼

串聯使用時，會把第一個產生的結果，做爲參數傳遞給第二個過濾器使用，以此類推。

好了今天咱們 Vue 的過濾器就說到這，你們不妨多多嘗試下在項目中使用，提升咱們的開發效率，不能老是想着去修改數據，這些功能與套路有時會發揮很好的價值。

若是文章對你有啓發，記得點個贊。

關注個人微信公衆號：六小登登，更多幹貨文章，歡迎一塊兒交流。

人人均可以成爲高手。我是一個會技術，又寫乾貨的碼農。歡迎勾搭。