Vue过滤器(filter)

过滤器(filter)

        对要显示的数据进行特定格式化后再显示，就是把一些不想要的东西过滤掉，在不改变原始数据的情况下只返回过滤后想显示的数据（适用于一些简单逻辑的处理，但在vue3中已废弃使用)

过滤器的使用

        过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 (从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由管道符 ("|") 指示：

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

在组件中定义局部过滤器

        引入<script src="../dayjs.min.js"></script>

filters:{
    timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
        return dayjs(value).format(str)
    },
}

定义全局过滤器

Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

注意：当全局过滤器和局部过滤器重名时，局部过滤器优先级更高

过滤器属于 JavaScript函数，可以接收参数，也可以传递使用

<h2>现在是：{{time | timeFor('YYYY-MM-DD')}}</h2>

<h2>现在是：{{time | timeFor('YYYY-MM-DD') | mySlice}}</h2>

总结

        1.部过滤器优先于全局过滤器被调用

        2.过滤器也可以接收额外参数、多个过滤器也可以串联

        3.并没有改变原本的数据，是产生新的对应的数据