定义：对需要显示的数据进行格式化之后进行呈现。
语法：
（1）全局的实现方式：Vue.filter(name,callback)
（2）局部的实现方式：new Vue{filters:{}}
使用方式：
（1）{
{ xxx | 过滤器名}}
（2） v-bind:属性 = “xxx | 过滤器名”
过滤在使用的时候需要注意：
（1）过滤器也可以接收额外参数、多个过滤器也可以串联。例如：
过滤器可以实现传参的方式：{
{time | timeFormater(‘YYYY_MM_DD’) | mySlice}}
，在这里，time传给 timeFormater(‘YYYY_MM_DD’) ，接着 timeFormater(‘YYYY_MM_DD’)的返回值传给mySlice，在这里“|”指的是管道的意思。
（2）过滤器不会改变原本的数据，只是对原本的数据进行过滤，产生新的数据并且返回。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript" src="../vue_js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h1>此时的时间戳是{{time}}</h1>
<h1>利用计算属性实现：{{computedTime}}</h1>
<h1>利用method实现:{{getFmtTime()}}</h1>
<h1>过滤器实现：{{time | timeFormater}}</h1>
<h1>过滤器可以实现传参的方式：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h1>
<h1 :x="msg | mySlice">无极生太极，太极生两仪</h1>
</div>
<script>
Vue.config.productionTip = false
//全局过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
const vm = new Vue({
el: '#root',
data: {
msg: '我爱中国，！！！！',
time: 1663142688108
},
computed: {
computedTime() {
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)
}
}
})
</script>
</body>
</html>
版权声明：本文为weixin_43228946原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。