vue获取当前时间并格式化

// 在 Vue 组件中获取当前时间并格式化

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

<script>
export default {
  data() {
    return {
      currentTime: new Date(), // 获取当前时间
    };
  },
  computed: {
    // 使用计算属性格式化时间
    formattedTime() {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
      return this.currentTime.toLocaleString('zh-CN', options); // 格式化为中文日期格式
    }
  },
  mounted() {
    // 每秒更新一次时间
    this.updateTime();
    setInterval(this.updateTime, 1000);
  },
  methods: {
    updateTime() {
      this.currentTime = new Date(); // 更新当前时间
    }
  }
};
</script>

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

解释说明：

1. 模板部分 (<template>):

   • 使用插值语法 {{ formattedTime }} 显示格式化后的时间。

2. 脚本部分 (<script>):

   • data: 初始化 currentTime 为当前的 Date 对象。
   • computed: 定义 formattedTime 计算属性，使用 toLocaleString 方法将 currentTime 格式化为指定的日期和时间格式。
   • mounted: 页面加载完成后，调用 updateTime 方法，并设置每秒更新一次时间。
   • methods: 定义 updateTime 方法，用于更新 currentTime。

3. 样式部分 (<style scoped>):

   • 可以在这里添加组件的样式。