Vue实现未读消息小红点

本文主要是介绍Vue实现未读消息小红点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

点击查询时调用接口

if (tab.label == "通知") {this.$request.get(this.$store.state.Url + "xxx", {id: this.obj.planId,}).then((res) => {res.map((item) => {this.xxx= item.xxx;});});
}

<div class="noticeList"><div class=""><divclass="noticeName"v-for="(item, index) in notice":key="index"@click="noticeDetail(item)"><h3>{{ item.xxx }}</h3><h3 v-if="item.readed == 1" style="color: #28b1ad">已读</h3><h3 v-if="item.readed == 0" style="color: #eb6100">未读</h3></div></div>
</div>

这篇关于Vue实现未读消息小红点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---