您应该设置日期属性的格式。您可以创建一个函数：

formattedDate(date) {
  const dateObj = new Date(date)
  return dateObj.toLocaleDateString('en-US')
}

然后在你的模板中调用日期属性时，你可以把它作为函数属性发送。例如：

<ul>
<li v-for="message in messages" :key="message.id">
{{ formattedDate(message.created_at) }}
</li>
</ul>

你必须为你的消息数组创建一个额外的 prop ，例如“show_date”。此属性将决定是否显示日期。

可以通过计算值进行：

computed: {
  messages() {
    return this.message.map((m, index) => {
      // Get previous message from source array
      const prevMessage = this.message[index - 1];
      if (prevMessage) { // If previous message exists let's check the dates
        return {...m, show_date: !this.isSameDate(m.created_at, prevMessage.created_at) };
      } else { // otherwise we will show the date
        return {...m, show_date: true };
      }
    });
  },
},

这里是检查日期是否是同一天的函数，但您可以使用momentjs或dayjs代替

methods: {
  isSameDate(first, second) {
    const firstDate = new Date(first);
    const secondDate = new Date(second);
    return firstDate.getFullYear() === secondDate.getFullYear() && 
      firstDate.getMonth() === secondDate.getMonth() && 
      firstDate.getDate() === secondDate.getDate();
  },
},

最后，您必须仅在'show_date'为true时才能按计算的prop和显示日期呈现消息。

<div v-for="m in messages" :key="m.id">
  <div v-if="m.show_date">
    {{ m.created_at }}
  </div>
  <div>
    {{ m.message }}
  </div>
</div>

你可以在这里找到完整的代码：https://codepen.io/AlekseiKrivo/pen/xxyXpmY