- 理解过滤器
功能：对要显示的数据进行特定格式化后在显示
注意：并没有改变原本的数据，可是产生新的对应的数据
- 编码
2.1 定义过滤器
vue.filter(filterName,function(value,[arg1,arg2]){
进行一定的数据处理
return newValue
})
2.2 使用过滤器
{{myDate | filterName}}
{{myDate | filterName(arg))}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 需求：对当前时间进行指定格式显示 -->
<div id="test">
<h2>显示格式化的日期时间</h2>
<p>{{date}}</p>
<p>完整版：{{date | dateString}}</p>
<p>年月日：{{date | dateString("YYYY-MM-DD")}}</p>
<p>时分秒：{{date | dateString("HH:mm:ss")}}</p>
</div>
<script src="../js/vue.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
<script>
/* 自定义过滤器 */
Vue.filter("dateString", function (
value,
format = "YYYY-MM-DD HH:mm:ss"
) {
return moment(value).format(format);
});
new Vue({
el: "#test",
data: {
data: new Date(),
},
});
</script>
</body>
</html>