filters 传参是什么_vue中filters 传入两个参数 / 使用两个filters的实现方法

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

.vue

传入两个参数

使用两个filters

format.js

export const formatVisitTime = (beginTime, finishTime) => {

if (!beginTime) {

return "--";

}

if (!finishTime) {

return formatDateTime(beginTime, 'hh:mm:ss')

}

beginTime = new Date(beginTime);

finishTime = new Date(finishTime);

let mss = Math.abs(beginTime.getTime() - finishTime.getTime());

let hours = Math.floor(mss / (1000 * 60 * 60));

let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));

return hours + "小时" + minutes + "分钟";

}

.ts

import format from "@/plugins/format";

@Component({

filters: {

formatVisitTime(beginTime, finishTime) {

return format.formatVisitTime(beginTime, finishTime);

}

})

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

场景

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

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

// omit other properties

filters: {

tryParseJsonString(jsonStr, defaultValue) {

let ret = defaultValue;

if (jsonStr) {

try {

ret = JSON.parse(jsonStr) || defaultValue;

} catch (e) {

console.warn('JSON格式不正确，解析失败', e.message);

}

return ret;

}

// ...

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

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

总结

以上所述是小编给大家介绍的vue中filters 传入两个参数 / 使用两个filters的实现方法 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对龙方网络网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

filters 传参是什么_vue中filters 传入两个参数 / 使用两个filters的实现方法相关推荐

filters 传参是什么_vue过滤器filters的使用
filters过滤器主要用与对数据内容的格式化,主要是可以用双大括号和v-blind 中使用,filter是需要传递参数的,默认的是前面的值就是参数,如果设置了其他参数,他们则是第二个第三个参数.例如 ...
URL传参时从URL中获取中文参数的方法
利用url传参时如果url中的参数是中文时因为编码类型不同在页面中获取会出现乱码使用此方法能获取url中的参数值并解决乱码问题调用时直接 GetUrlByParamName("参数名& ...
微信小程序uni.switchTab传参获取不到；小程序跳转到tabBar页并传参；uni-app微信小程序获取tabBar页面参数失败；uni-app微信小程序tabBar页面onLoad不执行
需求场景:从非tabBar页面B跳转到tabBar页面A,并想要携带参数. 如果使用uni.switchTab传参,会导致tabBAE页面获取不到参数: 原因: 官方文档有说,uni.switchTa ...
jquery 乱码传参_jquery获取URL中参数解决中文乱码问题的两种方法
从A页面通过url传参到B页面时,解析url参数可以用下面两种方法: 方法一:正则分析法 function getQueryString(name) { var reg = new RegExp(&q ...
函数传参字典_Python 函数中的 4 种参数类型
作者:小小程序员链接:https://zhuanlan.zhihu.com/p/89538123 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 在调用函数时,通常 ...
php 小程序页面传参,介绍小程序中传递参数的实现方法
这篇文章主要介绍了微信小程序参数传递详解的相关资料,需要的朋友可以参考下微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即 ...
axios 跨域传参_在Vue中如何使用axios跨域访问数据
vue.js学习之跨域请求***与axios传参一:跨域请求*** 1:打开config/index.jsmodule.exports{ dev: { } } 在这里面找到proxyTable{} ...
mysql jdbc怎么用问号传参_java – jdbc PreparedStatement中的问号问题
我来回浏览互联网,发现我的问题无法解决. 我试图使用参数绑定与jdbc查询mysql表,但它在我的语句中不断报告问号的语法错误. 这是我的班级: package todoList_; import j ...
vue url传参，获取url中的参数
url参数 //在生命周期中获取,在方法中写法相同 create(){this.$router.currentRoute.query.id //这个不用this.$route.query.id //用 ...
thymeleaf+bootstrap，onclick传参实现模态框中遇到的错误
网上大多帖子是这么写的 onclick调javascript函数时,不能直接使用οnclick="editUser(${prod.id})",这样会报错,需要修改成如下的格式. 1 ...

filters 传参是什么_vue中filters 传入两个参数 / 使用两个filters的实现方法

filters 传参是什么_vue中filters 传入两个参数 / 使用两个filters的实现方法相关推荐

最新文章

热门文章