vue.js - Vue，dayjs在模板上输出错误

Question

在控制台日志中，我有15:14，但在模板中，我有12:14. 为什么？

<template>
    <span>{{ date }}</span> <!-- **expected** Thu, 25 Feb 2021 15:14:04 Thu, **got** 25 Feb 2021 12:14:04 GMT -->
</template>

<script>
export default {
  computed: {
    date() {
      const date = getStatusDate(); // returns string 2021-02-25 15:14:04
      return dayjs(date, 'YYYY-MM-DD HH:mm:ss+z')
    }
  }
}
</script>

Answer 1

由于输入日期字符串没有指定时区，因此基础Date对象dayjs假定为本地时区。模板的字符串插值导致dayjs().toString(), 其中使用Date.prototype.toUTCString(), 导致不同时间的显示。

解决方法是使用dayjs().format()来控制输出字符串的格式：

dayjs(date, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')

const getStatusDate = () => '2021-02-25 15:14:04'

new Vue({
  el: '#app',
  computed: {
    date() {
      const date = getStatusDate()
      return dayjs(date, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    }
  }
})

<script src="https://unpkg.com/vue@2.6.12"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

<div id="app">
  <p>{{ date }}</p>
</div>