vue利用Moment插件格式化时间的实例代码

以下是关于Vue中利用Moment插件格式化时间的实例代码的攻略。

步骤一：引入Moment.js

首先，在你的Vue项目中，你需要引入Moment.js。你可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment.min.js"></script>

这是从CDN引入Moment.js的方式，你也可以通过其他方式引入它，比如使用npm包管理器进行安装。

步骤二：在Vue组件中使用Moment.js

接下来，在你的Vue组件中，你需要通过import的方式引入Moment.js，然后就可以对时间进行格式化。以下是一个简单的示例：

<template>
  <div>
    <p>当前时间为: {{ formatTime(currentTime) }}</p>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data() {
    return {
      currentTime: new Date()
    }
  },
  methods: {
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

此示例中，我们首先通过import引入Moment.js，然后在data中定义了一个实例变量currentTime。在formatTime方法中，我们传入currentTime，并调用Moment.js的format方法将其格式化为'YYYY-MM-DD HH:mm:ss'格式。

步骤三：应用在具体的实例中

当然，我们还需要在实际例子中应用这个方法。以下是另一个示例，它展示了如何在Vue的列表中显示时间戳。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <span>{{ item.title }}</span>
        <span>{{ formatTime(item.timestamp) }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import moment from 'moment'

export default {
  data() {
    return {
      list: [{
        id: 1,
        title: '文章1',
        timestamp: 1614164063000
      },{
        id: 2,
        title: '文章2',
        timestamp: 1614115625000
      }]
    }
  },
  methods: {
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

在这个示例中，我们通过v-for循环列表，并在模板中调用formatTime方法将时间戳格式化。最终效果如下所示：

文章1 2021-02-24 15:21:03
文章2 2021-02-23 23:13:45

以上就是利用Moment插件格式化时间的实例代码的完整攻略。