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

2024-03-30 14:17:00

先给大家介绍下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的实现方法 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue 过滤器filter实例详解

vue的过滤器一般在JavaScript 表达式的尾部,由"|"符号指示: 过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等. 例如:{{ date | dateFormat }}这是过滤器的写法:{{ dateFormat(date) }}这是函数调用的写法可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义.  {{ message | capitalize }} <!-- 在 `v-bind` 中 --&
Vue2.0 v-for filter列表过滤功能的实现

使用计算属性app.js var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", &quo
Vue filter介绍及详细使用

Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppercase 全部大写 lowercase 全部小写 currency 输出金钱以及小数点 pluralize 输出复数的形式 debounce 延期执行函数 limitBy 在 v-for 中使用,限制数量 filterBy 在 v-for 中使用,选择数据 orderBy 在 v-for 中使用,
vue.js的computed,filter,get,set的用法及区别详解

1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa
在Vue methods中调用filters里的过滤器实例

需求:vue中,除了在模板中使用过滤器,有时候,methods中也需要使用filters中的过滤器, 网友hongz1125提出的解决办法: this.$options.filters[filter](...args) //这种方法很简单,也很实用下面是我的方法,有点复杂.建议使用上面网友说的方法. filters: { formatScore(score) { if (score < 20) { score = '不合格'; } else if (score >= 20 &&
Vue filters过滤器的使用方法

本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下实例先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters
Vue 过滤器filters及基本用法

1.示例代码采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat
vue中filters 传入两个参数 / 使用两个filters的实现方法

先给大家介绍下vue中filters 传入两个参数 / 使用两个filters .vue 传入两个参数 <van-col>{{第一个参数|formatVisitTime(第二个参数)}}</van-col> 使用两个filters <van-tag plain :color="item.CreateTime(参数)|formatVisitDate(filters方法)|formatVisitDateColor(filters方法)">{{item.C
vue 中 get / delete 传递数组参数方法

在前后端交互的时候,有时候需要通过 get 或者 delete 传递一个数组给后台,但是这样直接传递后台无法接收数据,因为在传递的过程中数组参数会被转译,结果如下: 参数:{ name : [ 1, 2, 3 ] } 转译效果:http://aaa.com?name[]=1&name[]=2&name[]=3 目标效果:http://aaa.com?name=1&name=2&name=3 解决办法: 使用 qs 插件将数组参数序列化 1.qs.stringify({ a
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由
在vue中更换字体,本地存储字体非引用在线字体库的方法

1,首先把下载的字体两种格式放到本地 2,新建文件夹 3,在这个文件里写 4,这main.js 里引用 5,在style里引用字体,结束! 以上这篇在vue中更换字体,本地存储字体非引用在线字体库的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
vue中改变选中当前项的显示隐藏或者状态的实现方法

在vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下: 当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了element-ui,那么操作起来会比较简单一些,这样设置: v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)" js中:
在vue中实现点击选择框阻止弹出层消失的方法

在vue项目中,选择性别是用的一个弹出层, <div class="sex" v-show="showed" transition='fade' @click="unshow"> <ul @click.stop="stophidden"> <li class="choice">选择</li> <li> <label>男</labe
在vue中获取微信支付code及code被占用问题的解决方法

这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取本网址,截取code: 在vue中哪里获取code? 在路由钩子函数beforeEach获取.(如果想了解beforeEach的用法,请关注我下一篇博客). 我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=&qu
vue中使用带隐藏文本信息的图片、图片水印的方法

一.带隐藏文本信息的图片通过RGB 分量值的小量变动,不影响对图片的识别.因此,我们可以在图片加入文字信息. 最终达到如下效果: 首先,在该组件中加入img用于显示图片 <canvas ref="canvas" v-show="0"></canvas> <img :src="imageUrl" v-if="imageUrl"/> 调用方法 encryptionImg({ width = '
Vue中多个元素、组件的过渡及列表过渡的方法示例

多个元素之间过渡动画效果多元素之间如何实现过渡动画效果呢?看下面代码 .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } <div id="root"> <transition name="fade"> <div v-if="show">hell
关于vue中watch检测到不到对象属性的变化的解决方法

前言在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的.这--,有点难以置信! 正文 <template> <div> <dl>name: {{option.name}}</dl> <dl>age: {{option.age}}</dl> <dl> <button @click="updateAgeTo25">upda

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

相关推荐

随机推荐