当前位置：首页 > VUE

vue框架实现日期显示

2026-02-23 21:39:51VUE

Vue 框架实现日期显示的方法

使用 JavaScript Date 对象

在 Vue 组件中可以直接使用 JavaScript 的 Date 对象来获取当前日期，并通过计算属性或方法动态显示日期。

<template>
  <div>
    <p>当前日期：{{ currentDate }}</p>
  </div>
</template>

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

使用第三方库（如 Moment.js 或 Day.js）

对于更复杂的日期格式化或操作，可以引入轻量级的日期库如 Day.js 或 Moment.js。

安装 Day.js：

vue框架实现日期显示

npm install dayjs

在 Vue 中使用：

<template>
  <div>
    <p>格式化日期：{{ formattedDate }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      formattedDate: dayjs().format('YYYY-MM-DD')
    };
  }
};
</script>

使用 Vue 过滤器

可以定义全局或局部过滤器来格式化日期，适用于多处复用。

vue框架实现日期显示

<template>
  <div>
    <p>过滤后的日期：{{ new Date() | formatDate }}</p>
  </div>
</template>

<script>
export default {
  filters: {
    formatDate(value) {
      return value.toLocaleDateString('en-US');
    }
  }
};
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中，可以通过 ref 或 reactive 结合 onMounted 动态更新日期。

<template>
  <div>
    <p>动态日期：{{ date }}</p>
  </div>
</template>

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

export default {
  setup() {
    const date = ref(new Date().toISOString().split('T')[0]);

    onMounted(() => {
      setInterval(() => {
        date.value = new Date().toISOString().split('T')[0];
      }, 86400000); // 每天更新
    });

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

国际化日期显示

如果需要支持多语言日期显示，可以使用 Intl.DateTimeFormat。

<template>
  <div>
    <p>国际化日期：{{ localizedDate }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    localizedDate() {
      return new Intl.DateTimeFormat('zh-CN').format(new Date());
    }
  }
};
</script>

以上方法可以根据需求选择，从简单原生实现到复杂功能扩展均可覆盖。