哪里使用Vue串联过滤器

这篇文章主要讲解了哪里使用Vue串联过滤器，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

创新互联客户idc服务中心，提供BGP机房服务器托管、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心，我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务，资深网络工程师在机房提供7*24小时标准级技术保障。

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

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 的时候，肯定会这样做：

这样，表示状态的 1， 2， 3 就变成了 待付款，待发货，待收货。这没有什么问题。但是，需求来了，当订单未付款时，表示状态的文字应该为红色。就是当状态为 待付款 时，文字要为红色！这个问题曾经困扰了有一段时间，用了各种办法，虽然也是实现了需求，但终归不太优雅。直到最近在翻看 vue 文档，才想起来有串联过滤器的用法，可以完美解决这个需求，上码：

就这么简单。

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

• 过滤器必须是个纯函数
• 过滤器中拿不到 vue 实例，这是 vue 故意这么做的
• 在全局注册过滤器是用 Vue.filter()，局部则是 filters: {}
• 在方法中调用过滤器方法为： this.$options.filters.XXX
  

看完上述内容，是不是对哪里使用Vue串联过滤器有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。