52 lines
1.4 KiB
HTML
52 lines
1.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<script src="js/vue@2.7.16.js"></script>
|
||
|
|
<script src="js/dayjs.min.js"></script>
|
||
|
|
<title>过滤器</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<!-- 管道符只能使用在filters中 -->
|
||
|
|
<h3>现在是：{{time | timeFormater}}</h3>
|
||
|
|
<h3>现在是：{{time | timeFormater("YYYY年MM月DD日 HH:mm:ss")}}</h3>
|
||
|
|
<h3>
|
||
|
|
现在是：{{time | timeFormater("YYYY年MM月DD日 HH:mm:ss") |
|
||
|
|
timeFormaterSlice}}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<!-- 不能使用在v-model -->
|
||
|
|
<h3 :peiqi="message | globeTimeFormaterSlice">
|
||
|
|
使用全局过滤器：{{message | globeTimeFormaterSlice}}
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 定义全局过滤器
|
||
|
|
Vue.filter("globeTimeFormaterSlice", function (val) {
|
||
|
|
return val.slice(0, 4);
|
||
|
|
});
|
||
|
|
|
||
|
|
const vm = new Vue({
|
||
|
|
el: "#app",
|
||
|
|
data: {
|
||
|
|
time: new Date(),
|
||
|
|
message: "全局的过滤器使用在标签上...",
|
||
|
|
},
|
||
|
|
methods: {},
|
||
|
|
filters: {
|
||
|
|
/* 时间格式化 */
|
||
|
|
timeFormater(val, str = "YYYY-MM-DD HH:mm:ss") {
|
||
|
|
return dayjs(val).format(str);
|
||
|
|
},
|
||
|
|
timeFormaterSlice(val) {
|
||
|
|
return val.slice(0, 4);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</html>
|