vue使用moment如何将时间戳转为标准日期时间格式

将时间戳转为标准日期时间格式是我们在日常开发中常见的需求之一。Vue.js 是一款流行的 JavaScript 框架，它提供了丰富的工具和生命周期函数，方便我们操作数据和视图。在 Vue.js 中使用 moment.js 来操作时间戳（Timestamp）也是十分常见的方法。

以下是将时间戳转为标准日期时间格式的 Vue.js 和 Moment.js 教程。具体步骤如下：

1. 在浏览器中引入 Vue.js 和 Moment.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

2. 在 Vue.js 实例中引入 Moment.js，可以在 Vue.js 示例的 methods() 中进行全局引入或在组件中进行局部引入：

全局引入：

Vue.prototype.moment = moment;

局部引入：

import moment from 'moment';

3. 创建 Vue.js 实例

new Vue({
  el: '#app',
  data: {
    timestamp: 1618846219000,
  },
  methods: {
    formatDate(timestamp) {
      return this.moment(timestamp).format('YYYY-MM-DD hh:mm:ss');
    },
  }
});

4. 在 template 中调用 formatDate 方法

<div id="app">
  <p>时间戳：{{ timestamp }}</p>
  <p>转换后的日期时间：{{ formatDate(timestamp) }}</p>
</div>

在 Vue.js 示例中，我们先设置一个data数据选项，指定一个时间戳。接着在 methods()中创建一个名为 formatDate 的方法，该方法通过 moment 将时间戳转换为标准格式日期。

在 formatDate 方法中，我们调用 this.moment(timestamp).format 方法，将时间戳转换为格式化后的时间。例如，YYYY-MM-DD hh:mm:ss 表示格式化后的时间要按照年份（YYYY）、月份（MM）、日期（DD）、小时 （hh）、分钟（mm）和秒钟（ss）的顺序显示。

在 template中，我们使用 {{ formatDate(timestamp) }} 来输出格式化后的时间。

下面是一个用 Moment.js 将时间戳转为标准日期时间格式的示例代码：

import Vue from 'vue';
import moment from 'moment';

Vue.prototype.moment = moment;

new Vue({
  el: '#app',
  data: {
    timestamp: 1618846219000,
    format: 'YYYY-MM-DD hh:mm:ss'
  },
  methods: {
    formatDate(timestamp) {
      return this.moment(timestamp).format(this.format);
    },
  }
});

<div id="app">
  <p>时间戳：{{ timestamp }}</p>
  <p>转换后的日期时间：{{ formatDate(timestamp) }}</p>

  <select v-model="format">
    <option value="YYYY-MM-DD hh:mm:ss">YYYY-MM-DD hh:mm:ss</option>
    <option value="MMMM Do YYYY, h:mm:ss a">MMMM Do YYYY, h:mm:ss a</option>
    <option value="dddd, MMMM Do YYYY, h:mm:ss a">dddd, MMMM Do YYYY, h:mm:ss a</option>
  </select>
</div>

在此示例中，我们设置了一个 this.format 数据选项，用于动态修改时间显示的格式。我们还使用 v-model 指令将下拉列表和 this.format 数据选项进行绑定。

需要注意的是，Moment.js 中格式化日期的写法十分灵活。我们可以根据需求对格式化字符串进行修改，实现多种自定义格式的显示效果。

至此，我们就学习了在 Vue.js 中使用 Moment.js 来将时间戳转为标准日期时间格式的完整攻略，希望对你有所帮助。