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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
javascript下string.format函数补充
Aug 24 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
详解JavaScript中的链式调用
Nov 27 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
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
浅析php原型模式
2014/11/25 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
python文件比较示例分享
2014/01/10 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python 专题四 文件基础知识
2017/03/20 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python实战之制作天气查询软件
2019/05/14 Python
python读写csv文件实例代码
2019/07/05 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
健康家庭事迹材料
2014/05/02 职场文书
新教师个人总结
2015/02/06 职场文书
物流业务员岗位职责
2015/04/03 职场文书
工作感言一句话
2015/08/01 职场文书
2016国庆促销广告语
2016/01/28 职场文书
MySQL基础(二)
2021/04/05 MySQL