vue实现时间格式

时间格式化方法

在Vue中实现时间格式化通常使用JavaScript原生方法或第三方库如moment.js或day.js。以下是几种常见实现方式：

使用JavaScript原生方法

// 获取当前时间并格式化
const now = new Date();
const formattedTime = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${now.getSeconds().toString().padStart(2,'0')}`;

使用moment.js库

安装moment.js：

npm install moment

在Vue组件中使用：

import moment from 'moment';

// 格式化当前时间
const formattedTime = moment().format('YYYY-MM-DD HH:mm:ss');

// 格式化指定时间
const formattedDate = moment('2023-01-01').format('MMMM Do YYYY');

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

安装day.js：

npm install dayjs

在Vue组件中使用：

import dayjs from 'dayjs';

// 格式化当前时间
const formattedTime = dayjs().format('YYYY-MM-DD HH:mm:ss');

// 自定义格式
const customFormat = dayjs().format('DD/MM/YYYY dddd');

创建Vue过滤器

在main.js或组件中定义全局过滤器：

import Vue from 'vue';
import dayjs from 'dayjs';

Vue.filter('formatDate', function(value) {
  if (!value) return '';
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
});

在模板中使用：

<template>
  <div>{{ timestamp | formatDate }}</div>
</template>

使用计算属性格式化

在Vue组件中：

export default {
  data() {
    return {
      timestamp: '2023-05-15T08:30:00Z'
    }
  },
  computed: {
    formattedTime() {
      return dayjs(this.timestamp).format('YYYY年MM月DD日');
    }
  }
}

国际化时间格式

使用day.js的locale插件：

import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

const formatted = dayjs().format('MMMM D, YYYY'); // 五月 15, 2023

相对时间显示

使用day.js的相对时间插件：

import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

const relative = dayjs('2023-05-10').fromNow(); // 5天前

这些方法可以根据项目需求选择使用，对于简单项目推荐使用day.js，对于已有moment.js的项目可以继续使用moment.js。原生JavaScript方法适合不需要额外依赖的简单场景。