Vue3 获取当前带时区的时间格式 - 代码示例及解析 - 常规

<template>
  <div>
    {{ currentTime }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentTime: ''
    }
  },
  mounted() {
    this.getCurrentTime();
  },
  methods: {
    getCurrentTime() {
      const date = new Date();
      const options = { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric', 
        hour: 'numeric', 
        minute: 'numeric', 
        second: 'numeric', 
        hour12: false, 
        timeZone: 'Asia/Shanghai' 
      };
      this.currentTime = date.toLocaleString('en-US', options);
    }
  }
}
</script>
<p>在上述代码中，我们使用<code>Date</code>对象获取当前时间，并使用<code>toLocaleString</code>方法将其转换为带有时区的字符串格式。<code>options</code>对象中的<code>timeZone</code>属性可以设置所需的时区（这里使用了&quot;Asia/Shanghai&quot;时区）。然后，将当前时间赋值给<code>currentTime</code>变量，最后在模板中显示出来。</p>