Filter completes clock implementation of time formatting

 <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>

Filter completes clock implementation of time formatting

Guess you like