<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
过滤器：
定义：对要显示的数据进行特定格式化后在现实
语法：
1.注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}
2.使用过滤器：{{xxx | 过滤器名 或 v-bind:属性='xxx | 过滤器名'}}
备注：
1.过滤器也可以接受额外参数，多个过滤器也可以串联
2.并没有改变原本数据，是产生新的对应数据
-->
<script src="./dayjs.min.js"></script>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="root">
<h2>显示格式化后时间</h2>
<!-- 计算属性实现 -->
<h3>现在是：{{fmtTime}}</h3>
<!-- methods实现 -->
<h4>现在是：{{getFmtime()}}</h4>
<!-- 过滤器实现 -->
<h5>现在是：{{time | timeFormater}}</h5>
<!-- 过滤器实现（传参） -->
<h5>现在是：{{time | timeFormater1('YYYY')}}</h5>
<!-- 过滤器实现（传参）多个过滤器的使用 -->
<h5>现在是：{{time | timeFormater1('YYYY-MM-DD') | mySlice}}</h5>
<h6>{{name | mySlice}}</h6>
</div>
<script>
Vue.config.productionTip=false
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603,//时间戳
name:'我是个傻子还是帅子'
},
computed:{
fmtTime(){
return dayjs(this.time) .format('YYYY-MM-DD HH:mm:ss')
}
},
methods:{
getFmtime(){
return dayjs(this.time) .format('YYYY-MM-DD HH:mm:ss')
}
},
filters:{
timeFormater(value){
return dayjs(value) .format('YYYY-MM-DD HH:mm:ss')
},
timeFormater1(value,str='YYYY-MM-DD'){
return dayjs(value) .format(str)
},
mySlice(value){
return value.slice(0,7)
}
}
})
</script>
</body>
</html>