Vue、dayjs 模板上的错误输出

如何解决Vue、dayjs 模板上的错误输出

在控制台日志中，我有 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>

解决方法

由于输入日期字符串没有指定时区，Date 中的底层 dayjs 对象假定本地时区。模板的字符串插值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>