时间格式化

1.Vue 写法

   <!--template-->
  <div class="show-time" ref="showtime"></div>

 <!-- methods生命周期内 -->
  this.$nextTick(() => {
        let showtime = this.$refs.showtime;
        let t = null;

        t = setTimeout(time, 1000); //開始运行
        
        function time() {
          clearTimeout(t); //清除定时器
          let dt = new Date();
          let y = dt.getFullYear();
          let mt = dt.getMonth() + 1;
          let day = dt.getDate();
          let h = dt.getHours(); //获取时
          let m = dt.getMinutes(); //获取分
          let s = dt.getSeconds(); //获取秒

          showtime.innerHTML =
            "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      });

总结：获取DOM时可使用this.$nextTick(() => {});回调函数,等待页面渲染好后得到DOM元素

2. 原生js写法

 <!--html-->
    <div class="showTime"></div>

 <!--JavaScript ==> 格式： 当前时间：2020年3月20-11时55分14秒 -->
<script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行     
        }
</script>