当前位置：首页 > VUE

vue实现文章发表时间

2026-02-21 17:23:08VUE

Vue 实现文章发表时间的方法

在 Vue 中实现文章发表时间通常需要结合日期格式化库或原生 JavaScript 的日期处理功能。以下是几种常见实现方式：

使用原生 JavaScript 格式化日期

通过 new Date() 和日期方法获取并格式化时间：

// 在组件中
data() {
  return {
    article: {
      publishTime: '2023-11-15T08:30:00Z' // ISO 格式时间
    }
  }
},
computed: {
  formattedTime() {
    const date = new Date(this.article.publishTime);
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
  }
}

模板中直接使用计算属性：

<template>
  <p>发表时间：{{ formattedTime }}</p>
</template>

使用 Moment.js 库

Moment.js 是流行的日期处理库，需先安装：

npm install moment

组件中使用：

import moment from 'moment';

export default {
  data() {
    return {
      article: {
        publishTime: '2023-11-15T08:30:00Z'
      }
    }
  },
  computed: {
    formattedTime() {
      return moment(this.article.publishTime).format('YYYY-MM-DD HH:mm');
    }
  }
}

使用 Day.js 库（轻量替代）

Day.js 是 Moment.js 的轻量替代方案：

vue实现文章发表时间

npm install dayjs

组件中使用：

import dayjs from 'dayjs';

export default {
  computed: {
    formattedTime() {
      return dayjs(this.article.publishTime).format('YYYY-MM-DD HH:mm');
    }
  }
}

使用 Vue 过滤器

可定义全局过滤器统一处理时间格式：

// main.js
import Vue from 'vue';
import dayjs from 'dayjs';

Vue.filter('formatTime', (value) => {
  return dayjs(value).format('YYYY-MM-DD HH:mm');
});

模板中使用：

vue实现文章发表时间

<p>发表时间：{{ article.publishTime | formatTime }}</p>

处理相对时间（如“3天前”）

使用 Day.js 的 relativeTime 插件：

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn'; // 中文

dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

// 计算属性
relativeTime() {
  return dayjs(this.article.publishTime).fromNow();
}

从后端 API 获取时间

假设通过 API 获取文章数据：

export default {
  data() {
    return {
      article: {}
    }
  },
  async created() {
    const res = await axios.get('/api/article/123');
    this.article = res.data;
  }
}

确保后端返回的时间字段为 ISO 字符串或时间戳。

时区处理

使用 dayjs-timezone 处理时区：

import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';

dayjs.extend(utc);
dayjs.extend(timezone);

// 转换为上海时区
dayjs.tz(this.article.publishTime, 'Asia/Shanghai').format('YYYY-MM-DD HH:mm');