在 vue 中格式化日期的多种方法

Vue 2月前 122

Vue 是一种流行的前端框架，它提供了许多功能，其中包括格式化日期的多种方法。在本文中，我们将介绍几种方法，帮助你在 Vue 中格式化日期。

使用 moment.js

moment.js 是一个流行的 JavaScript 日期库，它可以轻松地格式化日期。要在 Vue 中使用 moment.js，首先需要安装它。可以使用 npm 或 yarn 安装 moment.js。以下是一个使用 moment.js 格式化日期的示例：

import moment from 'moment';

export default {
  data() {
    return {
      date: '2021-08-01',
    };
  },
  computed: {
    formattedDate() {
      return moment(this.date).format('MMMM Do YYYY, h:mm:ss a');
    },
  },
};

在上面的代码中，我们首先导入 moment.js 库。然后，在 data 中定义了一个日期，我们将使用它来格式化日期。在 computed 中，我们定义了一个名为 formattedDate 的计算属性，它使用 moment.js 格式化日期，并返回格式化后的值。

使用 Date 对象

Vue 中的 Date 对象可以用来格式化日期。以下是一个使用 Date 对象格式化日期的示例：

export default {
  data() {
    return {
      date: '2021-08-01',
    };
  },
  computed: {
    formattedDate() {
      const dateObj = new Date(this.date);
      return `${dateObj.getMonth() + 1}/${dateObj.getDate()}/${dateObj.getFullYear()}`;
    },
  },
};

在上面的代码中，我们首先在 data 中定义了一个日期。在 computed 中，我们定义了一个名为 formattedDate 的计算属性，它使用 Date 对象格式化日期，并返回格式化后的值。

使用 Vue 过滤器

Vue 过滤器是一种将值转换为特定格式的函数。可以使用 Vue 过滤器来格式化日期。以下是一个使用 Vue 过滤器格式化日期的示例：

Vue.filter('dateFormat', function(value) {
  if (!value) return '';
  const dateObj = new Date(value);
  return `${dateObj.getMonth() + 1}/${dateObj.getDate()}/${dateObj.getFullYear()}`;
});

export default {
  data() {
    return {
      date: '2021-08-01',
    };
  },
  computed: {
    formattedDate() {
      return this.$options.filters.dateFormat(this.date);
    },
  },
};

在上面的代码中，我们首先定义了一个名为 dateFormat 的 Vue 过滤器。在过滤器中，我们使用 Date 对象格式化日期，并返回格式化后的值。然后，在 computed 中，我们定义了一个名为 formattedDate 的计算属性，它使用 dateFormat 过滤器格式化日期，并返回格式化后的值。