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中Boolean.toSource()方法的使用
Jun 05 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
JavaScript中的高级函数
Jan 04 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
node.js到底要不要加分号浅析
Jul 11 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 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
详解PHP错误日志的获取方法
2015/07/20 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python BS4库的安装与使用详解
2018/08/08 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
python实现按行分割文件
2019/07/22 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Django在Model保存前记录日志实例
2020/05/14 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
制药工程专业个人求职自荐信
2014/01/25 职场文书
啤酒节策划方案
2014/05/28 职场文书
销售人员求职信
2014/07/22 职场文书
小学生春游活动方案
2014/08/20 职场文书
上课说话检讨书
2015/01/27 职场文书