过滤器(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.并没有改变原本的数据,是产生新的对应的数据