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>
