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 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
javascript实现完美拖拽效果
May 06 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
PHP7新特性简述
Jun 11 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP简单遍历对象示例
2016/09/28 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python的sorted用法详解
2019/06/25 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
拔河比赛口号
2014/06/10 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
小班下学期个人总结
2015/02/12 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python