一.作用及其使用场景
- 只能在vue2.0中使用,vue3.0废弃了此操作;
- 过滤器常用于文本的格式化;
- 只能用在插值表达式和v-bind属性绑定
二.过滤器的基本使用方法
绑定过滤器函数:
<p>当前时间为:{{time|format}}</p>
将函数写在filters中:
filters:{
format(val){//此处的形参总为前面要处理的time
...(处理操作)
return ...(返回处理后的结果)
}
}
三.私有过滤器和全局过滤器
定义:在filters节点下定义的过滤器,成为"私有过滤器" , 因为只能在当前vm实例控制的el范围内使用 ; 如果希望在多个vue实例之间共享过滤器.则需要定义全局过滤器;
//全局过滤器–独立于每个vm实例之外
//Vue.filter()方法接收两个参数:
// 第1个参数,是全局过滤器的"名字"
// 第2个参数,是全局过滤器的"处理函数"
Vue.filter( 'capitalize', (str) =>{
return str.charAt(O).toUpperCase() + str.slice(1) + '~~'
})
四.实现一个日期格式化的全局过滤器
使用day.js库来实现:
a.npm安装并引入: npm install dayjs --save import dayjs from 'dayjs'
b.声明格式化时间的全局过滤器
Vue.filter("dateFormat",function(time){
const dtStr = dayjs(time).format("YYYY-MM-DD HH:MM:SS")
return dtStr
})
五.过滤器的其他用法*
- 连续调用多个过滤器
<!--把 message 的值,交给filterA进行处理-->
<!--把 filterA处理的结果,再交给filterB进行处理-->
<!--最终把 filterB 处理的结果,作为最终的值渲染到页面上 -->
{{message | filterA | filterB }}
- 过滤器传参
<!-- arg1 和arg2是传递给filterA 的参数-->
<p>i{ message | filterA(arg1, arg2)}</p>
//过滤器处理函数的形参列表中:
// 第一个参数:永远都是"管道符“前面待处理的值
// 从第二个参数开始,才是调用过滤器时传递过来的arg1和 arg2参数
Vue.filter( 'filterA',(msg,arg1, arg2) =→>{
1/过滤器的代码逻辑...
})