什么是过滤器?
对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
示例
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>江河三千里</title>
<script type='text/javascript' src='http://ljy0427.online/js/vue.js'></script>
<script type='text/javascript' src='http://ljy0427.online/js/dayjs.js'></script>
</head>
<body>
<div id='root'>
<h1>现在是:{{time}}</h1>
<!-- 计算属性实现 -->
<h3>现在是:{{fmtTime}}</h3>
<!-- 过滤器实现 -->
<h3>现在是:{{time|timeFormater}}</h3>
</div>
</body>
<script type='text/javascript'>
Vue.config.productionTip = false
var vm = new Vue({
el: '#root',
data: {
time: Date.now()
},
computed: {
fmtTime() {
return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
}
},
filters: {
timeFormater(res) {
return dayjs(res).format("YYYY-MM-DD HH:mm:ss")
}
}
}
);
console.log(Date.now())
</script>
</html>
可以看到这里多了这个filters关键字,和data,computed这些都属于Vue中的配置对象
并且在配置这个过滤器的时候,实际上和函数一样,这里就可以看到timeFormater
中的res对应的就是time这个属性。