Vue.js 获取当前时间和日期

在本文中，我们将介绍如何使用 Vue.js 获取当前的时间和日期。

获取当前时间

要获取当前的时间，我们可以使用 JavaScript 的内置对象 Date。在 Vue.js 中，我们可以通过在 data 中定义一个属性来保存当前时间的值，然后使用 Date 对象来更新这个属性的值。

下面是一个简单的例子：

<template>
  <div>
    <p>当前时间是：{{ currentTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: ''
    };
  },
  mounted() {
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000);
  },
  methods: {
    updateCurrentTime() {
      this.currentTime = new Date().toLocaleTimeString();
    }
  }
};
</script>

在这个例子中，我们首先在 data 中定义了一个属性 currentTime，用于保存当前时间的值。然后在 mounted 钩子函数中，我们调用了 updateCurrentTime 方法来初始化当前时间，并使用 setInterval 方法每秒钟更新一次当前时间的值。在 updateCurrentTime 方法中，我们使用 Date 对象的 toLocaleTimeString 方法来获取当前的时间并将其赋值给 currentTime 属性。

获取当前日期

要获取当前的日期，我们可以使用 JavaScript 的内置对象 Date。和获取当前时间类似，我们可以在 Vue.js 中通过在 data 中定义一个属性来保存当前日期的值，然后使用 Date 对象来更新这个属性的值。

下面是一个示例：

<template>
  <div>
    <p>当前日期是：{{ currentDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: ''
    };
  },
  mounted() {
    this.updateCurrentDate();
  },
  methods: {
    updateCurrentDate() {
      this.currentDate = new Date().toLocaleDateString();
    }
  }
};
</script>

在这个例子中，我们在 data 中定义了一个属性 currentDate，用于保存当前日期的值。然后在 mounted 钩子函数中，我们调用了 updateCurrentDate 方法来初始化当前日期。在 updateCurrentDate 方法中，我们使用 Date 对象的 toLocaleDateString 方法来获取当前的日期并将其赋值给 currentDate 属性。