js 判断消息日期时间隔断

这篇文章介绍了如何在Vue.js应用中使用HTML模板和JavaScript计算属性来动态显示消息发送时间,包括条件判断和日期格式化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML

<!-- showTime判断是否显示隔断时间 -->	
<template v-for="(item, index) in messagelist">
			<message-item :ref="`messageItems${index}`" v-if="!item.isDeleted" @lookCommodity="lookCommodity"
				@optOpen="optOpen" :index="index" @turn="turn" :selectItemid="selectItemid" @play="play" :key="item.ID"
				:message="item" :showTime="index===messagelist.length-1 || item.sentTime -  messagelist[index+1].sentTime > 60"> </message-item>
		</template>



	<!-- 隔断 -->
		<view class="time" v-if="showTime && showMessage">
			{{time}}
		</view>

js




computed:{
			time() {
				let data = this.message.sentTime / 1000
				// 今天的零点
				let currentTime = parseInt(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000)
				// 获取昨天的零点
				let beforTime = currentTime - 86400
				if (data >= currentTime) {
					return this.$u.timeFormat(data, 'hh:MM')
				} else if (data > beforTime) {
					return '昨天' + this.$u.timeFormat(data, 'hh:MM')
				} else {
					return this.$u.timeFormat(data, 'mm月dd日 hh:MM')
				}
			},
		},


props: {
			showTime: {
				default: true,
				type: Boolean
			},
			message: {
				type: Object,
				required: true
			},
			index: {
				type: Number,
				require: true
			},
			selectItemid: {
				type: [String, Number],
				default: ''
			},


		},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值