filter()过滤器

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

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

可以在每一个组件中定义本地的过滤器

filters:{
    capitalize:function(value){
        if(!value) return
        value = value.toString()
        return value.charAt(0).toUpperCase()+value.slice()
    }
}

或者在创建实例之前定义全局过滤器

Vue.filters({
    capitalize:function(value){
        if(!value) return
        value = value.toString()
        return value.charAt(0).toUpperCase()+value.slice()
    }
)}

new Vue({

})

当全局过滤器和局部过滤器重名时 , 会采用局部过滤器进行处理 .

当过滤器函数收到表达式的值(之前的操作链的结果)作为第一个参数 . 上面的例子 , capitalize过滤器函数将会收到message的值为第一个参数 .

过滤器可以串联: {{message | filterA | filterB}}

串联这个例子中 , filterA被定义为接收单个参数的过滤器 ,表达式message的值价格作为参数传到函数中 . 然后继续调用同样被定义为接收单个参数的过滤器函数filterB , 将 filterA的结果传递到filterB中

过滤器是JavaScript函数 , 因此可以接收参数 .

{{ message | filterA('arg1', arg2) }}

这里的filterA被定义为接收三个参数的过滤器函数 , 其中message的值作为第一个参数 , 普通字符串 'arg1'作为第二个参数 , 表达式'arg2'的值作为第三个参数 .

以上资料主要来自于vue.js官网

例 ,用过滤器格式化时间 :

时间可能在一个项目中多处使用到 , 所以设置为全局过滤器 .

第一步当然是下包 , npm i dayjs@1.10.8 (最新版本为 1.11.2)

第二步 在main.js中导入dayjs , 定义全局过滤器 .

import  dayjs  from 'dayjs'

Vue.filter(ForDate,(day)=>{   //filter原本就是过滤的意思 , 在Es6中也是作为筛选数组的方法
    return dayjs(day).forDate('YYYY-MM-DD HH-mm-ss')
})

在子组件中 , 调用全局过滤器 ,对时间进行格式化 .

<el-table-column label='时间' >  //这里的是ElementUI组件,要在组件中对时间格式化,可能需要插槽
    <template v-slot="{row}">
        {{row.pub_date | ForDate}}   //输出时间为2022-05-23 16:45:14 
    </template>
</el-table-column>