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 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
canvas绘制七巧板
Feb 03 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
JS backgroundImage控制
2009/05/19 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
Python去除列表中重复元素的方法
2015/03/20 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python实现logistic分类算法代码
2020/02/28 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
员工试用期考核自我鉴定
2014/04/13 职场文书
工程承包协议书
2014/04/22 职场文书
竞选班委演讲稿
2014/04/28 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
项目合作意向书模板
2014/07/29 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
市场部岗位职责
2015/02/12 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
GO中sync包自由控制并发示例详解
2022/08/05 Golang