<!DOCTYPE html>
<html>
<head>
<title>vue过滤器</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<p>{{date|capitalize("yyyy-MM-dd HH:mm:ss")}}</p>
</div>
<script type="text/javascript">
/*全局过滤器*/
Vue.filter('capitalize', function(value, format) {
var date = '';
var year = value.getFullYear();
var month = value.getMonth() + 1;
var day = value.getDate();
var hours = value.getHours();
var minute = value.getMinutes();
var seconds = value.getSeconds();
if (format == "yyyy-MM-dd") {
date = year + "年" + month + "月" + day + "日"
} else {
date = year + "/" + month + "/" + day + " " + hours + ":" + minute + ":" + seconds
}
return date;
})
var app = new Vue({
el: "#app",
data: {
date: new Date()
},
/*局部过滤器*/
filters: {
capitalize: function(value) {
var date = '';
var year = value.getFullYear();
var month = value.getMonth() + 1;
var day = value.getDate();
var hours = value.getHours();
var minute = value.getMinutes();
var seconds = value.getSeconds();
if (format == "yyyy-MM-dd") {
date = year + "年" + month + "月" + day + "日"
} else {
date = year + "/" + month + "/" + day + " " + hours + ":" + minute + ":" + seconds
}
return date;
}
}
methods: {
}
})
</script>
</body>
</html>