Vue格式化日期详解

一、常用日期格式化方法

// 1. 使用Date对象toLocaleString()方法进行格式化
let date = new Date();
let strDate = date.toLocaleString(); // 2022/1/5 下午2:05:21

// 2. 使用Intl.DateTimeFormat()方法进行格式化
let date = new Date();
let options = { year: 'numeric', month: 'long', day: 'numeric' };
let formatter = new Intl.DateTimeFormat('zh-cn', options);
let strDate = formatter.format(date); // 2022年1月5日

// 3. 使用moment.js库进行格式化
import moment from 'moment';
let date = new Date();
let strDate = moment(date).format('YYYY年MM月DD日'); // 2022年01月05日

在Vue中，我们通常使用第三种方法，即使用moment.js库进行日期格式化。它使用起来方便简单，且支持多种语言、时区等功能。

二、Vue过滤器中的日期格式化

// main.js中引入moment.js库
import moment from 'moment';
Vue.prototype.$moment = moment;

// 在Vue过滤器中使用
Vue.filter('formatDate', function(value, formatStr) {
  if (!value) return '';
  return moment(value).format(formatStr);
});

// 在组件中使用

   

上面的代码中，我们将moment.js库引入到Vue的原型中，并在Vue过滤器中定义了一个名为formatDate的方法，用于将日期格式化为指定的格式。在组件中，我们使用管道符号“|”调用这个过滤器并传递参数。

三、使用第三方库vue-moment

// 安装
npm install vue-moment

// 引入并使用
import VueMoment from 'vue-moment';
Vue.use(VueMoment);

vue-moment是一个与moment.js库集成的Vue插件，它提供了一组格式化日期的指令和过滤器。安装后，我们可以在组件中直接使用这些指令和过滤器。

四、使用element-ui中的日期选择器

在element-ui中，我们可以使用el-date-picker组件来选择日期。它支持多种格式的日期选择，如年、月、日、日期范围等。

五、总结

本文介绍了在Vue中进行日期格式化的多种方法，包括直接使用Date对象的toLocaleString()方法、使用Intl.DateTimeFormat()方法、使用moment.js库、使用vue-moment插件、使用element-ui中的日期选择器等。