Vue 过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
注册过滤器:
- 全局:
Vue.filter(name,callback)
- 局部:
new Vue{filters:{}}
- 注意全局是:filter,而局部的是 filters
使用过滤器:
- 插值语法:{{xxx | 过滤器名}}
- 单项数据绑定:v-bind:属性 = "xxx | 过滤器名"
备注:
过滤器 可以接受额外参数,多个过滤器也 可以串联
过滤器并 没有改变原本的数据,是产生新的对应数据
实例
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 计算属性 -->
<h2>现在:{{fmtTime}}</h2>
<!-- methods -->
<h2>现在:{{getFmtTime()}}</h2>
<!-- 过滤器 -->
<h2>现在:{{time | timeFormater}}</h2>
<!-- 过滤器接受额外参数 -->
<h2>现在:{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h2>
<!-- 过滤器串联 -->
<h2>现在:{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
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)
}
}
})
</script>
</html>