你用vue写一个带有会话列表并且可以选择用户的微信聊天页,用户有头像、昵称、发送消息的时间,会话列表中有数字角标

### 回答1：
以下是一个简单的Vue组件示例，用于显示微信聊天页面的会话列表，以及允许用户选择要与之聊天的联系人。组件将接收一个用户对象列表作为prop，并使用v-for指令在列表中生成一个条目。

<template>
  <div>
    <ul class="conversation-list">
      <li v-for="(user, index) in userList" :key="index" @click="selectUser(user)">
        <div class="conversation-item">
          <div class="avatar"><img :src="user.avatar" /></div>
          <div class="info">
            <div class="name">{{ user.name }}</div>
            <div class="last-message">{{ user.lastMessage }}</div>
          </div>
          <div class="timestamp">{{ user.timestamp }}</div>
          <div class="badge">{{ user.unread }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    userList: {
      type: Array,
      required: true,
    },
  },
  methods: {
    selectUser(user) {
      // 发送选定用户的事件
      this.$emit('user-selected', user);
    },
  },
};
</script>

<style>
.conversation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.conversation-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.avatar {
  margin-right: 10px;
}

.name {
  font-weight: bold;
}

.timestamp {
  margin-left: auto;
  font-size: 12px;
  color: #999;
}

.badge {
  display: inline-block;
  background-color: red;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-left: 10px;
}
</style>

在这个组件中，我们将每个用户对象的属性分别渲染为列表项的不同部分。我们还添加了一个角标来表示未读消息数量。当用户单击一个列表项时，组件将触发一个事件，将选定的用户对象传递给父组件，以便进一步处理。

### 回答2：
我使用Vue编写了一个带有会话列表和可以选择用户的微信聊天页。

首先，我创建了一个会话列表组件，并使用Vue的数据绑定功能将用户的头像、昵称和发送消息的时间显示在列表中。为了使会话列表更加直观，我为每个未读消息设置了一个数字角标。

在聊天页组件中，用户可以选择要与之聊天的用户。当用户点击一个会话列表中的用户时，我使用Vue的事件绑定功能触发一个方法，该方法会传递被选择用户的信息。然后，我在聊天页中根据传递的用户信息显示对应的头像、昵称、发送消息的时间等。

为了实现这个功能，我还使用了Vue的路由功能，将会话列表和聊天页分别指定为路由的组件，并在路由配置中指定了相应的路径。这样，用户就可以通过点击不同的路径来切换到会话列表和聊天页。

总的来说，我使用Vue编写了一个带有会话列表和可以选择用户的微信聊天页。通过Vue的数据绑定功能和路由功能，我能够动态地显示用户的头像、昵称、发送消息的时间，并且在会话列表中显示未读消息的数字角标。这样，用户就可以方便地选择不同的用户进行聊天。