问题:
转化为下方格式:
使用过滤器
过滤器只能用在{{}}
和v-bind
表达式中
全局过滤器
{{sex | normalSex}}
/** function的第一个名称被过滤死,永远都是管道符的前的sex*/
Vue.filter("过滤器的名称", function(data) {
return "这是你想变得值";
})
时间过滤器代码
Vue.filter("formatDate", function (date, pattern = "") {
var dt = new Date(date);
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var day = dt.getUTCDate();
if (pattern.toLocaleLowerCase() === "yyyy-mm-dd") {
return `${year}-${month}-${day}`;
} else {
var hours = dt.getHours();
var minutes = dt.getMinutes();
var seconds = dt.getSeconds();
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
});
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>全局过滤(时间格式)</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg | formatDate()}}</h1>
</div>
</body>
<script>
// 时间过滤器
Vue.filter("formatDate", function (date, pattern = "") {
var dt = new Date(date);
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var day = dt.getUTCDate();
if (pattern.toLocaleLowerCase() === "yyyy-mm-dd") {
return `${year}-${month}-${day}`;
} else {
var hours = dt.getHours();
var minutes = dt.getMinutes();
var seconds = dt.getSeconds();
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
});
var vm = new Vue({
el: "#app",
data() {
return {
msg: new Date(),
};
},
});
</script>
</html>