好资源导航 » 文章资讯 » 详解Vue串联过滤器的使用场景

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

2023-07-26 10:41:04 65

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

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




//...
.order_status{
font-size:14px;
}
//...

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




//...
.order_status{
font-size:14px;
&.not-pay{
color:red;
}
}
//...

就这么简单。

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

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

到此这篇关于详解Vue串联过滤器的使用场景的文章就介绍到这了,更多相关Vue串联过滤器内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐