您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了哪里使用Vue串联过滤器，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化等，比如：
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>就这么简单。
关于过滤器，这里还有几点要注意的：
看完上述内容，是不是对哪里使用Vue串联过滤器有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。