Vue允许我们自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。


<!-- 在双花括号中 -->
<div>{{ message | capitalize }}</div>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

一、全局过滤器
定义一个全局过滤器很简单，只需要导出一个方法即可。

使用的时候很简单，只需要在入口文件全局引入此过滤器即可，使用 Vue.filter(key, value) 引入。

比如，Java后端返回的时间戳精确到秒，而JS中的时间戳是用毫秒表示，则可以定义一个转换时间戳的全局过滤器:

//main.js
import Vue from 'vue'
Vue.filter('millisecond', (value) => {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)
})

在需要使用的组件使用：

<div>{{1516101106 | millisecond}}</div>

全局过滤器之单一挂载

/*** dateTmp:要过滤的值* fmtTmp:传入的参数，可接收多个参数*/
<template><!-- 2021-12-20 19:14:18 --><div>{{ 1639998858000 | dateFormat("yyyy/MM/dd HH:mm:ss") }}</div>
</template>Vue.filter('dateFormat', function (dateTmp, fmtTmp) {let fmt = fmtTmplet date = dateTmpif (!fmt) {fmt = 'yyyy.MM.dd'}if (!(date instanceof Date)) {date = new Date(date)}let o = {'M+': date.getMonth() + 1, // 月份'd+': date.getDate(), // 日'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, // 小时'H+': date.getHours(), // 小时'm+': date.getMinutes(), // 分's+': date.getSeconds(), // 秒'q+': Math.floor((date.getMonth() + 3) / 3), // 季度'S': date.getMilliseconds() // 毫秒}let week = {'0': '日','1': '一','2': '二','3': '三','4': '四','5': '五','6': '六'}if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))}if (/(E+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '星期' : '周') : '') + week[date.getDay() + ''])}for (var k in o) {if (new RegExp('(' + k + ')').test(fmt)) {fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))}}return fmt
});

全局过滤器之批量挂载

//定义方法
//filters.js
export function slice (temp,num) {return temp.slice(0,num);
}

//挂载
//main.js
import * as filters from '@/assets/js/filters';Object.keys(filters).forEach(key => {Vue.filter(key, filters[key]);
});

//调用
<div>{{ '123456' | slice(4) }} </div>

二、组件过滤器

组件过滤器更简单，只需在对应组件中定义 filters 即可，不过只针对本组件有效。

比如定义一个首字母大写的过滤器：

//定义方法
export default {filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}}
}

例子例子

<template><div>{{ msg | setSize }}</div>
</template><script>
export default {data() {return {msg: "我要被过滤",};},filters: {setSize(value) {if (value.length > 4) {return value.splice(0, 4) + "...";} else {return value;}},},
};
</script>

VUE中的filters过滤器2种用法相关推荐

vue中关于$emit及propos的用法
vue中关于$emit及propos的用法一:父组件可以使用propos把数据传递给子组件. 父组件:在父组件中的子组件标签中,通过父组件给子组件传递函数类型的props实现:子给父传递数据如: 子 ...
vue 中格式化时间过滤器格式化时间
vue 中格式化时间过滤器格式化时间 data.js 格式化方法使用 * // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s) ...
mysql中模糊查询的四种用法介绍
下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user ...
python中list[1啥意思_详解Python中list[::-1]的几种用法
本文主要介绍了Python中list[::-1]的几种用法,分享给大家,具体如下: s = "abcde" list的[]中有三个参数,用冒号分割 list[param1:para ...
mysql 中模糊查询的四种用法介绍
下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] ...
mysql中模糊查询的四种用法
转载自 https://www.cnblogs.com/songfayuan/articles/7290158.html 下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可 ...
java里break的使用方法_Java中break的第三种用法说明
在Java中,break语句有三种用法,第一种是用于终止switch语句中的语句序列,第二种是用于退出循环,然而第三种是用作goto语句的"文明"形式! 我们知道,goto语句会破 ...
mysql中insert语句的五种用法
文章目录前言一.values参数后单行插入二.values参数后多行插入三.搭配select插入数据四.复制旧表的信息到新表五.搭配set插入数据总结前言 insert语句是标准sql ...
Vue中模板template的四种写法
<div id="app"><h1>我是直接写在构造器里的模板1</h1> </div><template id=" ...
在vue中 storge 和vuex使用的用法区别
在vue中 storge 和vuex使用的用法区别 1.联动性:storge对于属性的改变不能触发其他页面的改动 storage: 存取login之后就不会改变的信息,比如userId, isAdmi ...

VUE中的filters过滤器2种用法

全局过滤器之单一挂载

全局过滤器之批量挂载

二、组件过滤器

VUE中的filters过滤器2种用法相关推荐

最新文章

热门文章