|
「喜欢是和优点谈恋爱，那么爱就是和缺点过日子啦」
1.全局过滤器
这里是一个全局过滤器，可以在全局调用，其中参数value可以收取到属性得到的值然后通过slice（0,4）获取前四位，下面讲解分别使用计算属性 监测属性 fliters局部过滤器实现。
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
2.计算属性实现
（1）先创建一个容器，这里我们需要写入过滤器的名来调用过滤器
<div id="root">
<h3>现在是:{{fmtTime | mySlice}}</h3>
</div>
（2）这里我们输出现在的时间，然后使用过滤器得到我们想要的结果。
其中 time 这里是一个时间戳。
dayjs 我们是导入到外部库来实现解析时间戳返回一个时间，可以再 Boot CDN 中安装，有兴趣的的可以交接一下，链接在这里：https://www.bootcdn.cn/dayjs/
new Vue({
el:'#root',
data:{
time:'1639377273144' //时间戳
},
computed:{
fmtTime(){
return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
}
}
})
3.监测属性实现
（1）这里容器的创建方法和上面一样就不在一一讲解，但是要注意函数名字以及过滤器名。
（2）以下代码我们可以看到大差不差，只是我们使用了不同的方式实现相同的效果。
methods: {
getFmtTime(){
return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
}
}
4.filters 局部过滤器
filters:{
timeFormater(value,str="YYYY年MM月DD日 HH:mm:ss"){
return dayjs(value).format(str)
},
mySlice(value){
return value.slice(0,4)
}
}
我们在内部创建一个过滤器（mySlice），逻辑也是一样，利用slice 属性获取前四位。
解决的过滤器的三种实现方法，让我们来做一个总结：
过滤器：
定义：对要显示的数据进行特定格式化后在显示（适用于一些简单的逻辑）
语法：
1.注册过滤器：Vue.fliter(name | callbak) 或 new Vue(fliters:{})
2.使用过滤器：{{xxx | 过滤器名} 或 v-bind：属性='xxx | 过滤器名字'}
备注：
1.过滤器也可以接收额外参数，多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应数据
|