微客导航 » 文章资讯 » vue中filters 传入两个参数 / 使用两个filters的实现方法

vue中filters 传入两个参数 / 使用两个filters的实现方法

2023-08-19 23:27:05 182

先给大家介绍下vue中filters传入两个参数/使用两个filters

.vue

传入两个参数

{{第一个参数|formatVisitTime(第二个参数)}}

使用两个filters

{{item.CreateTime|formatVisitDate}}

format.js

exportconstformatVisitTime=(beginTime,finishTime)=>{
if(!beginTime){
return"--";
}
if(!finishTime){
returnformatDateTime(beginTime,'hh:mm:ss')
}
beginTime=newDate(beginTime);
finishTime=newDate(finishTime);
letmss=Math.abs(beginTime.getTime()-finishTime.getTime());
lethours=Math.floor(mss/(1000*60*60));
letminutes=Math.floor((mss%(1000*60*60))/(1000*60));
returnhours+"小时"+minutes+"分钟";
}

.ts

importformatfrom"@/plugins/format";
@Component({
filters:{
formatVisitTime(beginTime,finishTime){
returnformat.formatVisitTime(beginTime,finishTime);
}
}
})

ps:下面看下Vue中的filter带多参

场景

在vue项目中，团队成员在模板中解析一个json字符串，然后这个字符串来自于后台，所以是类型不安全，直接用 JSON.parse就报错了，这里需要用 trycatch下。

实际是，因为这个解析json字符串的方法是纯函数，且经常用在模板中，所以作为filter合适，直接拷贝了其他项目的这个方法过来作为fitlers用，如下。

//omitotherproperties
filters:{
tryParseJsonString(jsonStr,defaultValue){
letret=defaultValue;
if(jsonStr){
try{
ret=JSON.parse(jsonStr)||defaultValue;
}catch(e){
console.warn('JSON格式不正确，解析失败',e.message);
}
}

returnret;
}
},
//...

在模板中，可以绑定到v-bind，使用如下

考虑到这个filter使用频繁，所以可以封装进全局mixin，避免频繁的引用。

参考 https://vuejs.org/v2/guide/fi...

总结

以上所述是小编给大家介绍的vue中filters传入两个参数/使用两个filters的实现方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
3162201930
czq8825@qq.com

vue中filters 传入两个参数 / 使用两个filters的实现方法

热门推荐

随机推荐