1、过滤器
1.1 概念
过滤器：
- 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
- 语法：
1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
- 1、过滤器也可以接收额外参数、多个过滤器也可以串联
- 2、并没有改变原本的数据, 是产生新的对应的数据
1.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="App">
<h1>格式化后的时间</h1>
<h2>现在是（计算属性实现）:{{formatTime}}</h2><br />
<h2>现在是（method实现）:{{getformatTime()}}</h2><br />
<h2>现在是（过滤器实现）:{{time | timeFormater}}</h2><br />
<h2>现在是（过滤器实现同时传参）:{{time | timeFormater('YYYY-MM-DD')}}</h2><br />
<h2>现在是（过滤器实现同时传参（多个过滤器的联合使用））:{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h2><br />
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//全局过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue",
time: 1658153149000, //时间戳
},
methods: {
getformatTime() {
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
computed: {
formatTime() {
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)
}
}
})
1.3 测试效果
