vue 中常见的时间格式转换

下面来详细讲解一下 Vue 中常见的时间格式转换。

一、Date 对象

在 JavaScript 中，我们可以使用 Date 对象来表示时间。Date 对象可以通过多种方式创建，比如字符串或者时间戳，也可以使用 Date 对象自带的方法进行转换。

1.1 创建 Date 对象

可以使用 Date 对象构造函数来创建 Date 对象：

const now = new Date();

这个语句将创建一个代表当前时间的 Date 对象。

也可以根据时间戳创建 Date 对象：

const timestamp = 1634448568714;
const date = new Date(timestamp);

这个语句将创建一个代表时间戳为 1634448568714 的时间的 Date 对象。

1.2 转换 Date 对象

可以使用 Date 对象的自带方法，如 getFullYear，getMonth，getDate，getHours，getMinutes，getSeconds，来将 Date 对象转成你需要的格式。

举个例子，将 Date 对象转化为 "YYYY-MM-DD" 格式：

const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');

const formattedDate = `${year}-${month}-${day}`;

1.3 格式化 Date 对象

还可以使用第三方库，如 Moment.js 或 Day.js 来格式化 Date 对象。这两种库的 API 都非常简洁易懂，使用起来也很方便。

1.3.1 Moment.js

在使用 Moment.js 时，可以先将 Date 对象转为 Moment 对象，然后使用 Moment.js 自带的格式化方法进行转换：

import moment from 'moment';

const date = new Date();
const formattedDate = moment(date).format('YYYY-MM-DD');

1.3.2 Day.js

使用 Day.js 的方式也非常简单：

import dayjs from 'dayjs';

const date = new Date();
const formattedDate = dayjs(date).format('YYYY-MM-DD');

二、管道符和过滤器

在 Vue 中，可以使用管道符 | 或者过滤器来进行数据格式的转换。

2.1 管道符

管道符可以将数据依次传递给后面的函数，可以将多个函数串联起来使用。

举个例子，将 Date 对象转化为 "YYYY-MM-DD" 格式：

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

<script>
export default {
  name: 'Example',

  data() {
    return {
      date: new Date(),
    };
  },

  filters: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    },
  },
};
</script>

2.2 过滤器

Vue 2.x 中，可以使用 Vue.filter 来定义全局过滤器：

Vue.filter('date', function(value) {
  const date = new Date(value);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
});

这样就可以在任意 Vue 组件中使用该过滤器：

<template>
  <div>{{ date | date }}</div>
</template>

<script>
export default {
  name: 'Example',

  data() {
    return {
      date: new Date(),
    };
  },
};
</script>

如果你使用的是 Vue 3.x，那么全局过滤器已经被废弃了。但是，你可以将过滤器作为局部的计算属性或者方法来使用。

以上就是 Vue 中常见的时间格式转换的完整攻略和示例。如果还有什么问题，欢迎留言。