<style>
#app {
width: 900px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: black;
color: rgb(81, 250, 2);
font-size: 26px;
font-weight: 500;
margin: 40px auto;
border-radius: 30px;
}
</style>
<body>
<div id="app">
{
{time | formartTime}}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
time: new Date(),
timer: null
},
methods: {
setDate() {
timer = setInterval(() => {
this.time = new Date();
}, 1000);
}
},
// 声明周期函数
//页面加载完 自动执行的函数
mounted() {
this.setDate();
},
// 组件销毁前 自动执行
beforeDestroy() {
clearInterval(timer);
},
filters: {
formartTime(date) {
let y = date.getFullYear(); // 年
let m = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1); // 月
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();// 日
let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); // 时
let min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); // 分
let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); // 秒
return `${y}-${m}-${day} ${h}:${min}:${s}`
}
}
});
</script>
//在 main.js中配置
// Vue中使用 过滤器 过滤时间的格式化 第一个参数是过滤器的名字 roiginVal是需要处理的时间数据
Vue.filter('dateFormat', function (originVal) {
let dt = new Date(originVal)
let y = dt.getFullYear()
let m = dt.getMonth() + 1 > 9 ? dt.getMonth() + 1 : '0' + dt.getMonth() + 1
let d = dt.getDate() > 9 ? dt.getDate() : '0' + dt.getDate()
let h = dt.getHours() > 9 ? dt.getHours() : '0' + dt.getHours()
let min = dt.getMinutes() > 9 ? dt.getMinutes() : '0' + dt.getMinutes()
let s = dt.getSeconds() > 9 ? dt.getSeconds() : '0' + dt.getSeconds()
return `${y}-${m}-${d} ${h}:${min}:${s}`
})
//使用的时候 直接在组件中使用
//例如: |
<el-table-column label="下单时间">
<template slot-scope="scope">
{
{ scope.row.create_time | dateFormat }}
</template>
</el-table-column>