vue 实现时间

Vue 实现时间显示

使用 Vue 实现时间显示可以通过多种方式完成，包括静态显示、动态更新以及格式化输出。以下是几种常见的实现方法：

静态时间显示

在 Vue 模板中直接绑定一个静态时间字符串：

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

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleString()
    };
  }
};
</script>

动态更新时间

通过 setInterval 实现时间的动态更新，并在组件销毁时清除定时器以避免内存泄漏：

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

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

使用第三方库格式化时间

如果需要更灵活的时间格式化，可以引入第三方库如 moment.js 或 date-fns：

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

<script>
import moment from 'moment';

export default {
  data() {
    return {
      currentTime: new Date()
    };
  },
  computed: {
    formattedTime() {
      return moment(this.currentTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  mounted() {
    setInterval(() => {
      this.currentTime = new Date();
    }, 1000);
  }
};
</script>

使用 Vue 过滤器

通过 Vue 过滤器实现时间格式化，便于在多个地方复用：

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

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

使用 Composition API

在 Vue 3 中，可以使用 Composition API 实现时间的动态更新：

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

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const currentTime = ref(new Date().toLocaleString());

    const timer = setInterval(() => {
      currentTime.value = new Date().toLocaleString();
    }, 1000);

    onUnmounted(() => {
      clearInterval(timer);
    });

    return { currentTime };
  }
};
</script>

以上方法可以根据具体需求选择使用，动态更新时间适用于需要实时显示的场景，而静态时间或过滤器适用于简单的展示需求。