vue3.0过滤器,vue中的过滤器
去年vue3出来了。增加了许多新功能，但也删除了一些功能。比如vue2中的滤镜功能就被删除了。同时，官方建议：用方法调用或计算属性替换过滤器。本文将分析vue3删除滤镜的原因，以及如何用其他方法实现滤镜的功能。
目录
vue的滤镜why是什么？示例分析需求描述HTML结构和数据如下：过滤器实现、计算实现、方法实现摘要
什么是vue的过滤器
过滤器可以通俗地理解为处理数据的一种特殊方法。
例如，枚举值可以使用筛选器：例如，1 2 3 4对应于成功失败，并且已在进行中返回。
例如，价格后面跟一个筛选器，价格被格式化为两位小数。
例如时间格式。
详情请参考官方文件。
why？
笔者认为原因是vue3需要简化代码，滤镜的功能重复。filter能实现的功能、方法、计算属性基本都能实现。所以干脆删除filter的vue源代码，维护起来更方便。
举例分析
需求描述
假设我们有一条快递信息。后端返回给我们的不是具体的状态值，而是对应的字符串1 2 3 4 5 6等等。不同的状态有一套对应关系。
规则，例如，如果状态是1，它是要装运的，等等。具体效果图和状态的对应关系如下：
HTML结构和data数据如下
模板
div id=应用程序
ul v-for=(item，index)in arr: key= index
李快递公司：{ { item . deliver company } }/李
Li运输状态：{{ item.expressState }}/li
/ul
/div
/模板
脚本
导出默认值{
data() {
返回{
arr: [
{
发货公司，京东快递，
express state:“1”，
},
{
送货公司：“顺丰速运”，
express state:“2”，
},
{
发货公司， ZTO快递:
expressState:“3”，
},
{
DeliverCompany:“邮政快递”，
expressState:“4”，
},
{
DeliverCompany:“极限兔子快递”，
express state:“5”，
},
{
DeliverCompany:“某某快递”，
expressState: null，
},
],
};
},
};
/脚本
使用filter实现
这里我们不需要全局过滤器，而是使用组件内部的过滤器。
模板
div id=应用程序
ul v-for=(item，index)in arr: key= index
李快递公司：{ { item . deliver company } }/李
！-使用过滤器语法-
Li运输状态：{ { item . express state show state } }/Li
/ul
/div
/模板
脚本
导出默认值{
//数据.篇幅有限，省略就好。
//在组件内部定义，然后根据不同的状态返回不同的值内容。
过滤器：{
showState(state) {
开关(状态){
案例“1”:
返回“待装运”；
打破；
案例“2”:
返回“已装运”；
打破；
案例“3”:
返回“在途”；
打破；
案例“4”:
返回“发货中”；
打破；
案例“5”:
返回“已收到”；
打破；
默认值：
返回‘快递信息丢失’；
打破；
}
},
},
};
/脚本
使用computed实现
模板
div id=应用程序
ul v-for=(item，index)in arr: key= index
李快递公司：{ { item . deliver company } }/李
！-使用计算属性-
Li运输状态：{ { Computed Text(item . express state)} }/Li
/ul
/div
/模板
脚本
导出默认值{
//数据.篇幅有限，省略就好。
计算值：{
computedText() {
//计算属性返回接收参数的函数。
返回函数(状态){
开关(状态){
案例“1”:
返回“待装运”；
打破；
案例“2”:
返回“已装运”；
打破；
案例“3”:
返回“在途”；
打破；
案例“4”:
返回“发货中”；
打破；
案例“5”:
返回“已收到”；
打破；
默认值：
返回‘快递信息丢失’；
打破；
}
};
},
},
};
/脚本
使用methods实现
模板
div id=应用程序
ul v-for=(item，index)in arr: key= index
李快递公司：{ { item . deliver company } }/李
！-如何使用它-
Li运输状态：{ { methods text(item . express state)} }/Li
/ul
/div
/模板
脚本
导出默认值{
//数据.篇幅有限，省略就好。
方法：{
方法文本(状态){
开关(状态){
案例“1”:
返回“待装运”；
打破；
案例“2”:
返回“已装运”；
打破；
案例“3”:
返回“在途”；
打破；
案例“4”:
返回“发货中”；
打破；
案例“5”:
返回“已收到”；
打破；
默认值：
返回‘快递信息丢失’；
打破；
}
},
},
};
/脚本
看到哔哔声，filter过滤器可以处理数据，computed计算属性和methods方法也可以处理数据。在这种情况下，它是重复的。
总结
Vue3删除过滤器类似于：
Employee filter可以完成这项工作，Employee computed和employee方法也可以，它们比employee filter做得好得多。在这种情况下，boss vue会解雇filter，而filter也会被解雇。毕竟多一个员工，多一份人工成本(员工筛选喊出来)
以上是vue3删除滤镜原因的详细内容。更多关于vue3删除滤镜的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。