(vue)vue项目获取日期 时间 星期

(vue)vue项目获取日期 时间 星期

---

效果：

代码：

<div class="top-time">
  <div class="time-currentDate">
    {{ currentDate }}
    <div class="time-img">
      <img src="@/assets/image/icon-time.png" alt />
    </div>
  </div>
  <div class="time-Weekday">
    <span>{{ currentWeekday }}</span>
    <span>{{ currentTime }}</span>
  </div>
</div>

js

data() {
  return {
    currentDate: "",
    currentTime: "",
    currentWeekday: "",
  }  
},

created() {
  setInterval(() => { 
    this.getCurrentDateTime();
    this.getCurrentWeekday();
  }, 1000);
},   

methods: {
  getCurrentDateTime() {
    const now = new Date();
    this.currentDate = now.toLocaleDateString();
    // this.currentTime = now.toLocaleTimeString(); // 时分秒格式
    this.currentTime = now.toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit",
    }); //时分格式
  },
  getCurrentWeekday() {
    const weekdays = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    const now = new Date();
    this.currentWeekday = weekdays[now.getDay()];
  },  
}

---

在上面的代码中，
1.通过 created 钩子函数在组件创建时调用 getCurrentDateTime 和 getCurrentWeekday 方法，并将获取到的日期、时间和星期保存在数据属性中。
2.然后，在模板中通过插值表达式 {{}} 展示这些数据。

getCurrentDateTime 方法使用 toLocaleDateString 和 toLocaleTimeString 方法来获取本地化的日期和时间字符串。
getCurrentWeekday 方法使用 getDay 方法获取当前日期对应的星期的索引，然后通过索引获取对应的星期文本。

• 时分格式

在上面的代码中，
1.将 toLocaleTimeString 方法的第二个参数设为一个空数组 []，
2.然后在该空数组中传递了一个选项对象 { hour: ‘2-digit’, minute: ‘2-digit’ }。
这个选项对象指定了小时和分钟的显示格式，‘2-digit’ 表示将数字显示为两位数。通过这样的设置，秒数将不会被包含在生成的时间字符串中。