Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

实现Vue按照创建时间和当前时间显示操作的方法可以使用moment.js库。该库可以帮助格式化日期和时间，并提供许多快捷选项。

以下是实现这一功能的完整攻略：

步骤1: 安装moment.js

npm install moment --save

步骤2: 在Vue组件中导入moment.js库

import moment from 'moment';

步骤3: 编写一个过滤器，用来格式化传入的时间戳

Vue.filter('formatTime', function(value) {
  if (value) {
    return moment(value).fromNow();
  }
});

步骤4: 在Vue组件中调用该过滤器

<p>创建时间：{{ post.createTime | formatTime }}</p>

示例1：

<template>
  <div>
    <h1>Vue时间格式化</h1>
    <p>创建时间：{{ post.createTime | formatTime }}</p>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'Vue时间格式化',
        content: '使用moment.js格式化时间',
        createTime: '2020-07-01 10:30:00'
      }
    }
  },
  filters: {
    formatTime(value) {
      if (value) {
        return moment(value).fromNow();
      }
    }
  }
}
</script>

示例2：

<template>
  <div>
    <h1>Vue时间格式化</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <h3>{{ post.title }}</h3>
        <p>{{ post.content }}</p>
        <p>创建时间：{{ post.createTime | formatTime }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      posts: [
        {
          id: 1,
          title: 'Vue时间格式化',
          content: '使用moment.js格式化时间',
          createTime: '2020-07-01 10:30:00'
        },
        {
          id: 2,
          title: 'Vue入门',
          content: '学习Vue的基本知识',
          createTime: '2020-06-30 16:45:00'
        },
        {
          id: 3,
          title: 'Vue进阶',
          content: '深入学习Vue的高级用法',
          createTime: '2020-06-25 12:20:00'
        }
      ]
    }
  },
  filters: {
    formatTime(value) {
      if (value) {
        return moment(value).fromNow();
      }
    }
  }
}
</script>