vue封装年月日时分秒

Posted 2022-04-01 老张在线敲代码

<template>
  <div>
      <div >
      <p v-html="formateTimeStamp(date)"></p>
    </div>
  </div>
</template>

<script>
export default 
   data: function () 
    return 
      date: new Date().getTime()
    
  ,
  mounted: function () 

  ,
  created: function () 
    this.loadTime()
  ,
  methods: 
    loadTime() 
      var _this = this;
      setInterval(() => 
        _this.date += 1000;
      , 1000);
    ,
    // 转换时间戳
    formateTimeStamp(time) 
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
      return (
        '<span style="font-size: 18px;">' +
        hour +
        ":" +
        minute + ":" + second +
        "</span><br/>" +
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        "   星期" +
        week
      );
    ,


</script>

<style>

</style>