过滤器基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->
<script type="text/javascript" src="../js/dayjs.min.js"></script> <!-- 引入Vue.js -->
</head>
<body>
<div id="root">
<h2>显示格式化之后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是:{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是:{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>现在是:{{time | timeformater}}</h3>
<!-- 过滤器传参 -->
<h3>现在是:{{time | timeformater('YYYY_MM_DD')}}</h3>
<!-- 过滤器嵌套 -->
<h3>现在是:{{time | timeformater('YYYY_MM_DD') | mySlice}}</h3>
</div>
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
<script type="text/javascript">
// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data:{
time:1621561377603
},
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)
},
mySlice(value){
return value.slice(0,4)
}
}
})
new Vue({
el:'#root2',
data:{
msg:'hello msg'
}
})
</script>
</body>
</html>
我们在vue中内部定义的叫做局部过滤器，只能给这个vue使用，
我们还能在创建vue实例对象之前定义过滤器，此时的过滤器就是一个全局过滤器