本文主要介绍怎么使用Vue过滤器Vue.filter和使用dayjs时间插件
认识过滤器:
- 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
- 语法:
1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”- 备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
如何引入dayjs
准备工作:
- 1.保存dayjs工具到本地
- 2.引入vue和dayjs
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
- 3.准备好一个容器
<div id="root"></div>
- 4.new 一个Vue实例
new Vue({
el:'#root',
data:{
time:1621561377603, //时间戳
msg:'你好,张三'
}
})
vue过滤器
包括局部过滤器实现和全局过滤器实现
1.局部过滤器:
<h3>过滤器实现:{{time | timeFormater}}</h3>
<h3>过滤器实现传参:{{time | timeFormater('YYYY_MM')}}</h3>
filters: {
timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss') {
console.log('@',value)
console.log('str',str)
return dayjs(value).format(str)
}
}
-
页面展示
-
从控制台输出可以看出,
过滤器第一个参数默认是time
,第二个参数直接传
2.全局过滤器
- 页面展示
<!-- vue实例1 -->
<div id="root">
<h3 :x="msg | mySlice">张三</h3>
</div>
<!-- vue实例2 -->
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
全局过滤器:注册和返回处理后的值
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
msg:'你好,张三'
}
})
new Vue({
el:'#root2',
data:{
msg:'hello,zhangsan!'
}
})
3.过滤器可以串联
<h3>过滤器可以串联:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
- 如下页面展示可以看出:第一个过滤器得出的2021_5_21的值传给第二个过滤器作为默认参数,最后页面展示第二个过滤器的出的值
使用dayjs过滤数据的几种方法
页面展示
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>过滤器</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>计算属性实现:{{fmtTime}}</h3>
<h3>methods实现:{{getFmtTime()}}</h3>
<h3>过滤器实现:{{time | timeFormater}}</h3>
<h3>过滤器实现传参:{{time | timeFormater('YYYY_MM')}}</h3>
<h3>过滤器可以串联:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">张三</h3>
</div>
<!-- 全局过滤器实现 -->
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603, //时间戳
msg:'你好,张三'
},
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') {
console.log('@',value)
console.log('str',str)
return dayjs(value).format(str)
}
}
})
new Vue({
el:'#root2',
data:{
msg:'hello,zhangsan!'
}
})
</script>
</html>