Vue 仅从 dateTime 显示日期答案

【问题标题】：Vue display date only from dateTimeVue 仅从 dateTime 显示日期
【发布时间】：2020-05-20 21:47:52
【问题描述】：

我正在使用 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.net/ujjumaki/e5mrz34k/7/

【问题讨论】：

你说的“减少一小时”是什么意思？您能否展示一些您想要的输出示例？
@Phil 第一个对象的日期是 2020-05-20T06:00:00.000Z。时间是 06:00:00。有没有办法使用时刻 js 扣除一小时并显示 05:00:00 而不是 06:00:00
仅供参考 2020-05-20T010:00:00.000Z 无效。小时 10 不应有前导零

标签： vue.js momentjs

【解决方案1】：

您总是可以制作一些filters 来进行时间操作和格式化。

例如...

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>

【讨论】：