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