02.vue过滤器-filters

最新推荐文章于 2024-10-25 15:02:20 发布

光の来处

最新推荐文章于 2024-10-25 15:02:20 发布

阅读量206

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_51099065/article/details/126473831

版权

一.作用及其使用场景

只能在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/过滤器的代码逻辑...
})