vue将毫秒数转化为正常日期格式的实例

下面是Vue将毫秒数转化为正常日期格式的实例的完整攻略。

1. 需求背景

有时候我们需要在项目中把毫秒数转化为正常的日期格式。比如我们有一个后端接口返回的时间戳是一个13位的毫秒数，我们需要把它转化为正常的日期格式方便用户查看。

2. 数字转化为日期

在Vue中，我们可以使用Date对象和moment.js库将数字转化为日期。

2.1 使用Date对象转化为日期

使用Date对象需要我们自己写代码实现，下面是一个示例：

<template>
  <div>
    <p>{{ timeToStr(timestamp) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timestamp: 1621036800000 // 这里的时间戳是2021年5月15日的毫秒数
    };
  },
  methods: {
    timeToStr(time) {
      const date = new Date(time);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    }
  }
};
</script>

在这个示例中，我们使用了new Date()方法把毫秒数转化为了Date对象，然后通过Date对象的方法获取年月日等数值，最终拼接成我们需要的日期格式。输出的结果是2021-5-15 0:0:0。

2.2 使用moment.js库转化为日期

moment.js是一个非常强大的日期处理库，可以方便地进行日期格式化、日期计算等操作。在Vue中使用moment.js也很简单，只需要先安装moment.js库：

npm install moment --save

安装完成之后，我们可以在Vue组件中直接使用moment对象。下面是一个示例：

<template>
  <div>
    <p>{{ moment(timestamp).format('YYYY-MM-DD HH:mm:ss') }}</p>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  data() {
    return {
      timestamp: 1621036800000 // 这里的时间戳是2021年5月15日的毫秒数
    };
  },
  methods: {
    moment(date) {
      return moment(date);
    }
  }
};
</script>

在这个示例中，我们先通过import语句导入moment.js库。然后在方法中使用moment()函数把毫秒数转化为moment对象，再通过.format()方法进行日期格式化。输出的结果和上面的示例一样是2021-5-15 0:0:0。

3. 总结

通过以上两个示例，我们可以看到Vue中将毫秒数转化为正常日期格式的方法是非常简单的。如果你只是需要简单的日期格式化，可以使用Date对象的方法；如果需要更加强大的日期处理能力，建议使用moment.js库。