微客导航 » 文章资讯 » 在vue中使用公共过滤器filter的方法

在vue中使用公共过滤器filter的方法

2023-09-11 03:02:04 487

平时我们在vue中使用过滤器时，在模板中定义的过滤器不能在其他模板中使用，所以要在每个模板中定义自己的filter，这样就会出现很多重复的代码，那有没有办法定义一个公用的filter，减少代码的重复呢？

下面就给大家展示下使用最多且有效的方法吧!

•首先在公用js中定义一个通用的filter.js，如下图所示，记得一定要把代码整个export出来

constvFilter={
numFilter:function(value){
//截取当前数据到小数点后两位
letrealVal=Number(value).toFixed(2)
returnrealVal
}
}
exportdefaultvFilter

•然后在main.js中引入

importvueFilterfrom'./js/filter'
for(letkeyinvueFilter){
Vue.filter(key,vueFilter[key])
}

•这样我们就可以在模板中尽情使用啦，比如说

￥{{goodsItem.goodsPrice|numFilter}}

总结

以上所述是小编给大家介绍的在vue中使用公共过滤器filter的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！