热搜：编程 Python Microsoft 编程语言 C++

详解Vue串联过滤器的如何使用场景

发布时间：2022-12-29 21:12:55 来源：互联网

.

走过山头，坐在夕阳勾勒的黄昏里，吹一缕向晚的凉风，听树叶婆娑着沙沙的声响。望着天边绯红的落日渐渐西沉，透过头顶的树隙，仍有一抹余温爬上微热的脸庞。

平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化等，比如：

Vue.filter('toThousandFilter', function (value) {
 if (!value) return ''
 value = value.toString()
 return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')
})

实现效果：

30000 => 30,000

当然这只是常规用法，没什么好说的。下面来说一个我在开发中遇到的一个需要用到串联过滤器的使用场景。

假设需要获取一个订单列表，其中的每一项的 status 字段用来表示订单状态：

 {
      id: '',
      order_num: '123456789',
      goodList: [ ... ],
      address: { ... },
      status: 1 // 1 待付款 2 待发货 3 待收货
     }

那我们拿到这个数据在，v-for 的时候，肯定会这样做：

 <template>
  <!-- ... -->
  <span class="order_status">{{ orderItem.status | getOrderStatus }}</span>
  <!-- ... -->
</template>
<script>
 export default {
  // ...
  filters: {
    getOrderStatus(status) {
      switch (status.toString()) {
        case '1':
          return '待付款';
        case '1':
          return '待发货';
        case '1':
          return '待收货';
        default:
          return '';
      }
    }
  }
  // ...
 }
</script>
<style scoped type="scss">
  // ...
  .order_status {
    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 '1':
          return '待发货';
        case '1':
          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>

就这么简单。

关于过滤器，这里还有几点要注意的：