当前位置：首页 > VUE

vue实现动态时间

2026-03-29 07:06:02VUE

Vue 实现动态时间的几种方法

使用 `Date` 对象和 `setInterval`

在 Vue 组件中，可以通过 JavaScript 的 Date 对象获取当前时间，结合 setInterval 实现动态更新。

vue实现动态时间

<template>
  <div>{{ currentTime }}</div>
</template>

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

使用 `moment.js` 或 `day.js` 库

如果需要更灵活的时间格式化，可以使用 moment.js 或轻量级的 day.js。

vue实现动态时间

<template>
  <div>{{ formattedTime }}</div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      formattedTime: ''
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000);
  },
  methods: {
    updateTime() {
      this.formattedTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
    }
  }
};
</script>

使用 Vue 的计算属性

如果时间不需要每秒更新，而是依赖其他数据变化，可以使用计算属性。

<template>
  <div>{{ formattedTime }}</div>
</template>

<script>
export default {
  computed: {
    formattedTime() {
      const now = new Date();
      return now.toLocaleTimeString();
    }
  }
};
</script>

使用第三方插件 `vue-moment`

如果项目已经集成 moment.js，可以直接使用 vue-moment 插件简化操作。

<template>
  <div>{{ currentTime | moment('YYYY-MM-DD HH:mm:ss') }}</div>
</template>

<script>
import VueMoment from 'vue-moment';
import moment from 'moment';

Vue.use(VueMoment, { moment });

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