可学可不学,可用可不用
过滤器
需求:把一个时间戳格式化成可读的年月日时间;
需要引入一个 dayjs 的 JS库,专门用来处理时间的;dayjs在这可以下载
<script src="./res/vue.js"></script>
<script src="./res/dayjs.min.js"></script>
提示:首先得引入 vue.js 和 dayjs 库(用来处理时间的JS库,有兴趣可以了解下);
<div id="root">
<h2>显示格式化后的日期</h2>
<h3>时间戳:{{time}}</h3>
<!-- 计算属性实现 -->
<h3>日期:{{fmtTime}}</h3>
<!-- methods 实现 -->
<h3>日期:{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>日期:{{time | timeFormater}}</h3>
<!-- 过滤器实现(传参) -->
<h3>日期:{{time | timeFormater('YYYY_MM_DD') }}</h3>
<!-- 过滤器实现(串联) -->
<h3>日期:{{time | timeFormater('YYYY_MM_DD') | timeSlice}}</h3>
<!-- 应用全局过滤器 -->
<h3>欢迎词:{{msg | mySlice}}</h3>
</div>
提示1:计算属性实现 和methods 实现都比较简单,methods 可以在插值语法中加上括号来执行;
提示2:过滤器需要 引入 全新的配置对象 filters:{}
,过滤器方法函数写在里面,在插值语法中使用 “|
” 管道的方式(有点像 linux 的管道),在后面写上过滤器的名;
提示3:过滤器可以传参,可复用,可串联;
提示4:过滤器,还有局部和全局过滤器之分,用法简单,不难区分;
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,5)
})
new Vue({
el:'#root',
data:{
time:1670069799153,
msg:'hello Vue'
},
computed:{
fmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
}
},
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY/MM/DD HH:mm:ss');
}
},
// 局部过滤器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
return dayjs(value).format(str)
},
timeSlice(value){
return value.slice(0,4)
}
}
})
提示1:先看全局过滤器,定义在 Vue.filter() 方法上,回调函数就是处理过滤的方法,一般在插值语法中使用;
提示2:局部过滤器都写在 filters:{}
这个配置对象里面,接受传参,可写多个;
看下效果:一个时间戳,用计算属性、methods 和三种过滤器的方式来实现,最后演示了一下全局过滤器;
【过滤器】总结:
定义:对要显示的数据进行特定格式化后再显示,(适用于一些简单逻辑的处理)。
语法:
1)注册过滤器: Vue.filter(name,callback) 或 new Vue({filters:{}})
2)使用过滤器:{{ xxx | 过滤器名 }} 或 v-bind:属性 = " xxx | 过滤器名"
备注:
1)过滤器也可以接收额外参数、多个过滤器也可以串联;
2)并没有改变原本的数据,是产生新的对应的数据;
感觉并不像老师说的,可用可不用,有些情况可能还是挺有用的;