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

由于输入日期字符串未指定时区，因此 dayjs 中的基础 Date 对象采用本地时区。模板的字符串插值leads to dayjs().toString(), which uses 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>

Vue, dayjs 模板输出错误

Vue, dayjs wrong output on template

vue.js

dayjs