1、 定义:对要品示的数据进行特定格化后再显示(适用于些简单逻辑的处理)。
2、语法:
- 1.注册过滤器: Vue.filter(name,callback)或new Vue{filters:{}}
- 2.使用过滤器: {{ xx| 过滤器名}} 或v-bind:属性= "xxx| 过滤器名"
3、 备注:
- 1.过滤器也可以按收额外参数、多个过滤器也可以串联
- 2.并没有改变原本的数据，是产生新的对应的数据
<div id="root">
<h1>显示格式化时间</h1>
<!-- 计算属性实现 -->
<h2>现在 ： {{fmtTime}}</h2>
<!-- methods实现 -->
<h2>现在 ： {{getFmtTime()}}</h2>
<!-- 过滤器实现 -->
<h2>{{time | timeFormater}}</h2>
<h2>{{time | timeFormater('YYYY年MM月DD日')}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//创建Vue实例
const vm = new Vue({ //ViewModel
el: '#root',
data: {
time : 12554565215545
},
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
computed : {
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
// 过滤器
filters : {
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
console.log('@@@',value);
return dayjs(value).format(str)
}
}
});
// console.log(vm);
</script>
