vue中filter的用法

平時開發中，需要用到過濾器的地方有很多，比如單位轉換、金額加千分位、文本格式化等，比如：

// 格式化金額
const digitsRE = /(\d{3})(?=\d)/g
Vue.filter('currencyFilter', function (value) {
value = parseFloat(value)
    if (!isFinite(value) || (!value && value !== 0)) return ''
    currency = currency != null ? currency : '$'
    decimals = decimals != null ? decimals : 2
    var stringified = Math.abs(value).toFixed(decimals)
    var _int = decimals ? stringified.slice(0, -1 - decimals) : stringified
    var i = _int.length % 3
    var head = i > 0 ? (_int.slice(0, i) + (_int.length > 3 ? ',' : '')) : ''
    var _float = decimals ? stringified.slice(-1 - decimals) : ''
    var sign = value < 0 ? '-' : ''
    return sign + currency + head + _int.slice(i).replace(digitsRE, '$1,') + _float    
})

實現效果16568686.00=> 16,568,686.00

這是常規用法，沒什么好說的。下面來說一下在開發中遇到的一個需要用到串聯過濾器的使用場景。

假設需要獲取一個訂單處理狀態的列表，其中的每一項的 status 字段用來表示訂單狀態：

  {
     id: '',
     order_num: '123456789',
     goodList: [ ... ],
     address: { ... },
     status: 1 // 1 待支付 2 待發貨 3 待收貨
   }

當我們拿到這個數據之后，v-for 的時候，肯定會這樣做：

<template>
    <!-- ... -->
    <span class="order_status_wrap">{{ orderItem.status | getOrderStatus }}</span>
    <!-- ... -->
</template>
<script>
  export default {
    // ...
    filters: {
        getOrderStatus(status) {
            switch (status.toString()) {
                case '1':
                    return '待支付';
                case '2':
                    return '待發貨';
                case '3':
                    return '待收貨';
                default:
                    return '';
            }
        }
    }
    // ...
  }
</script>
<style scoped type="scss">
    // ...
    .order_status_wrap {
        font-size: 14px;
    }
    // ...
</style>

這樣，表示狀態的 1， 2， 3 就變成了 待支付，待發貨，待收貨，這沒有什么問題。但是，當需求來了，要求當狀態是待支付時，文字應該為紅色。

vue文檔中有寫串聯過濾器的用法，針對這個問題可以很好的解決。

<template>
    <!-- ... -->
    <span class="order_status" :class="orderItem.status | getOrderStatus | getOrderStatusClass">{{ orderItem.status | getOrderStatus }}</span>
    <!-- ... -->
</template>
<script>
  export default {
    // ...
    filters: {
        getOrderStatus(status) {
            switch (status.toString()) {
                case '1':
                    return '待支付';
                case '2':
                    return '待發貨';
                case '3':
                    return '待收貨';
                default:
                    return '';
            }
        },
        getOrderStatusClass(status) {
            if (status === '待支付') {
                return 'not-pay'
            }
            return ''
        }
    }
    // ...
  }
</script>
<style scoped type="scss">
    // ...
    .order_status {
        font-size: 14px;
        &.not-pay {
            color: red;
        }
    }
    // ...
</style>

關於過濾器，這里還有幾點要注意的：

• 過濾器必須是個純函數
• 過濾器中拿不到 vue 實例，這是 vue 故意這么做的
• 在全局注冊過濾器是用 Vue.filter()，局部則是 filters: {}
• 在方法中調用過濾器方法為： this.$http://options.filters.XXX