Vue仅从dateTime显示日期

Question

我使用的是 moment.js 来格式化Vue上的日期时间。对象上的DateTime值是 2020-05-20 T 06:00:00.000 Z 格式。是否有办法从该时间中减去一个小时，然后只显示时间，使用 moment.js?

查看

<div id="app">
  <h2>How to deduct 1 hour and display only time rather than dateTime</h2>
  <ol>
    <li v-for="todo in todos">
      {{todo.dateTime}} /** its suppose to reduce one hour and display only time **/
    </li>
  </ol>
</div>

稿件

new Vue({
  el: "#app",
  data: {
    todos: [
      { id:'1', dateTime: "2020-05-20T06:00:00.000Z"},
      { id:'2', dateTime: "2020-05-20T010:00:00.000Z"},
    ]
  },
  methods: {

  }
})

下面是我在jsfiddle上的代码。

https:/jsfiddle.netujjumakie5mrz34k7。

Answer 1

你总是可以做一些 过滤器 来进行时间操作和格式化。

例如...

new Vue({
  el: "#app",
  data: {
    todos: [
      { id:'1', dateTime: "2020-05-20T06:00:00.000Z"},
      { id:'2', dateTime: "2020-05-20T10:00:00.000Z"},
    ]
  },
  filters: {
    dtSubtract (dt, duration, unit) {
      return moment.utc(dt).subtract(duration, unit)
    },
    dtFormat (dt, format) {
      return moment.utc(dt).format(format)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js" integrity="sha256-5oApc/wMda1ntIEK4qoWJ4YItnV4fBHMwywunj8gPqc=" crossorigin="anonymous"></script>
<div id="app">
  <h2>How to deduct 1 hour and display only time rather than dateTime</h2>
  <ol>
    <li v-for="todo in todos">
      <em>
        {{ todo.dateTime | dtFormat('HH:mm:ss') }}
      </em>
      becomes
      <strong>
        {{ todo.dateTime | dtSubtract(1, 'hour') | dtFormat('HH:mm:ss') }}
      </strong>
    </li>
  </ol>
</div>