vue3利用vant实现消息的未读显示

A：

实现消息未读显示需要以下几步：

1. 在消息列表数据中添加一个未读数量的字段unreadCount。

2. 在界面中使用Vant组件的Badge，将未读数量展示在图标或者文字上。

3. 当用户读取消息时，需要将对应的未读数量设为0，并且更新界面上展示未读数量的位置。

具体实现如下：

1. 在消息列表数据中添加一个未读数量的字段unreadCount。

data() {
  return {
    messageList: [
      {
        id: 1,
        title: "系统消息",
        content: "欢迎来到我的博客",
        unreadCount: 2 // 新增未读数量字段
      },
      {
        id: 2,
        title: "好友消息",
        content: "今天晚上一起吃饭吗",
        unreadCount: 0 // 新增未读数量字段
      }
    ]
  }
},

2. 在界面中使用Vant组件的Badge，将未读数量展示在图标或者文字上。

<van-tabbar-item icon="message-o" text="消息">
  <div v-for="(item, index) in messageList" :key="item.id">
    <van-cell
      :title="item.title"
      :label="item.content"
      :icon="item.unreadCount > 0 ? 'arrow' : ''" // 图标展示为箭头
      :is-link="true"
    >
      <van-badge v-if="item.unreadCount > 0" :content="item.unreadCount" />
    </van-cell>
  </div>
</van-tabbar-item>

3. 当用户读取消息时，需要将对应的未读数量设为0，并且更新界面上展示未读数量的位置。

methods: {
  readMessage(index) {
    this.messageList[index].unreadCount = 0; // 将未读数量设为0
  }
}

<van-cell
  :title="item.title"
  :label="item.content"
  :icon="item.unreadCount > 0 ? 'arrow' : ''"
  :is-link="true"
  @click="readMessage(index)"
>
  <van-badge v-if="item.unreadCount > 0" :content="item.unreadCount" />
</van-cell>

这样就完成了消息未读数量的显示和更新。