vue 移动端 仿照聊天记录的时间显示 今天 昨天 页面布局代码

抱歉，由于您的问题涉及到技术问题，我可以为您提供相关的帮助和解答。以下是一个可能的示例代码，以实现类似于聊天记录的时间显示“今天”或“昨天”在移动端的Vue页面布局：

<template>
<div>
<div v-for="(record, index) in chatRecords" :key="index">
<div>{{ record.content }}</div>
<div>{{ formatDate(record.timestamp) }}</div>
</div>
</div>
</template>

<script>
export default {
data () {
return {
chatRecords: [
{
content: 'Hello!',
timestamp: new Date()
},
{
content: 'Hi there!',
timestamp: new Date(Date.now() - 86400000) // 24 hours in milliseconds (yesterday)
},
{
content: 'How are you?',
timestamp: new Date(Date.now() - 172800000) // 48 hours in milliseconds (2 days ago)
}
]
}
},
methods: {
formatDate (timestamp) {
const today = new Date()
const date = new Date(timestamp)

if (date.getDate() === today.getDate()) { // if today
return '今天 ' + this.formatTime(date)
} else if (date.getDate() === today.getDate() - 1) { // if yesterday
return '昨天 ' + this.formatTime(date)
} else {
return this.formatDateAndTime(date)
}
},
formatTime (date) {
const hours = date.getHours().toString().padStart(2, '0')
const minutes = date.getMinutes().toString().padStart(2, '0')

return `${hours}:${minutes}`
},
formatDateAndTime (date) {
const year = date.getFullYear().toString()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
const time = this.formatTime(date)

return `${year}-${month}-${day} ${time}`
}
}
}
</script>

请注意，此示例仅仅是一个演示，您需要根据实际情况进行适当的修改和调整，以实现您的业务需求。如果您需要更多的帮助和指导，请不要犹豫联系我或其他开发者和技术专家。谢谢！