vue 获取当前时间

// 在 Vue 组件中获取当前时间的示例代码

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

<script>
export default {
  data() {
    return {
      currentTime: ''
    };
  },
  methods: {
    updateCurrentTime() {
      // 使用 JavaScript 的 Date 对象获取当前时间
      this.currentTime = new Date().toLocaleTimeString();
    }
  },
  created() {
    // 当组件创建时立即获取一次当前时间
    this.updateCurrentTime();
    // 每隔一秒更新一次当前时间
    setInterval(this.updateCurrentTime, 1000);
  }
};
</script>

<style scoped>
/* 这里可以添加样式 */
</style>

解释说明：

• 模板部分 (<template>)：显示当前时间，使用双大括号 {{ }} 插值语法来绑定 currentTime 数据属性。
• 脚本部分 (<script>)：
  • data()：定义了一个 currentTime 属性，用于存储当前时间。
  • methods：定义了一个 updateCurrentTime 方法，该方法使用 JavaScript 的 Date 对象获取当前时间，并将其格式化为本地时间字符串。
  • created() 生命周期钩子：在组件创建时调用 updateCurrentTime 方法以初始化时间显示，并设置一个定时器每秒调用一次 updateCurrentTime 方法来更新时间。
• 样式部分 (<style scoped>)：可以在这里添加样式，但这里没有具体的样式内容。