1、案例1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>过滤器</title>
</head>
<body>
<div id="app">
<p>原格式:{{date}}</p>
<!-- dateString指定自定义过滤器 -->
<p>年月日时分秒:{{date | dateString}}</p>
<p>年月日:{{date | dateString('YYYY-MM-DD')}}</p>
<p>时分秒:{{date | dateString('HH:mm:ss')}}</p>
</div>
<script src="../js/vue.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js" type="text/javascript"></script>
<script>
//自定义过滤器，必须写在Vue实例前
Vue.filter("dateString", function (value, format) {
//若有传format参数则按format格式进行格式化
//若没有传format参数则按YYYY-MM-DD HH:mm:ss格式进行格式化
return moment(value).format(format || "YYYY-MM-DD HH:mm:ss");
});
const vm = new Vue({
el: "#app",
data: {
date: new Date()
}
});
</script>
</body>
</html>