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


Posted in Javascript onJuly 15, 2019

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

.vue

传入两个参数

<van-col>{{第一个参数|formatVisitTime(第二个参数)}}</van-col>

使用两个filters

<van-tag plain :color="item.CreateTime(参数)|formatVisitDate(filters方法)|formatVisitDateColor(filters方法)">{{item.CreateTime|formatVisitDate}}</van-tag>

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,使用如下

<template>
 <comp :images="li.value | tryParseJsonString([])" />
</template>

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

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

总结

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

Javascript 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
React自定义hook的方法
Jun 25 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
详解vuex的简单todolist例子
Jul 14 #Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 #Javascript
微信小程序解析富文本过程详解
Jul 13 #Javascript
You might like
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
JSONP跨域请求
2017/03/02 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python中bisect模块用法实例
2014/09/25 Python
Python教程之全局变量用法
2016/06/27 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
如何使用Python调整图像大小
2020/09/26 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
Android interview questions
2016/12/25 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
大学生求职自荐信
2013/12/12 职场文书
创先争优活动方案
2014/02/12 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
中专生自荐信
2014/06/25 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
Promise静态四兄弟实现示例详解
2022/07/07 Javascript