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

以下是使用Vue.js编写的简单微信聊天页面示例，包含会话列表和聊天框：

<!-- App.vue -->
<template>
  <div id="app">
    <div class="sidebar">
      <div class="header">微信</div>
      <div class="conversations">
        <div
          v-for="(conversation, index) in conversations"
          :key="index"
          class="conversation"
          :class="{ active: activeConversationIndex === index }"
          @click="selectConversation(index)"
        >
          <div class="avatar">
            <img :src="conversation.avatar" alt="avatar">
            <span class="badge">{{ conversation.unread }}</span>
          </div>
          <div class="info">
            <div class="name">{{ conversation.name }}</div>
            <div class="message">{{ conversation.lastMessage }}</div>
          </div>
          <div class="time">{{ conversation.lastMessageTime }}</div>
        </div>
      </div>
    </div>
    <div class="chat">
      <div class="header">
        <div class="avatar">
          <img :src="activeConversation.avatar" alt="avatar">
        </div>
        <div class="info">
          <div class="name">{{ activeConversation.name }}</div>
          <div class="status">在线</div>
        </div>
      </div>
      <div class="messages">
        <div v-for="(message, index) in activeConversation.messages" :key="index" class="message">
          <div class="avatar">
            <img :src="message.avatar" alt="avatar">
          </div>
          <div class="content">{{ message.content }}</div>
          <div class="time">{{ message.time }}</div>
        </div>
      </div>
      <div class="input">
        <input type="text" v-model="newMessage" placeholder="请输入消息">
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      conversations: [
        {
          name: '小明',
          avatar: 'https://placeimg.com/80/80/people',
          unread: 3,
          lastMessage: '你在干嘛？',
          lastMessageTime: '13:28',
          messages: [
            {
              content: '你好',
              time: '13:30',
              avatar: 'https://placeimg.com/80/80/people',
              isMe: false
            },
            {
              content: '我在看电影',
              time: '13:31',
              avatar: 'https://placeimg.com/80/80/people',
              isMe: true
            }
          ]
        },
        {
          name: '小红',
          avatar: 'https://placeimg.com/80/80/people',
          unread: 1,
          lastMessage: '你在吃什么？',
          lastMessageTime: '12:15',
          messages: [
            {
              content: '在吃午饭',
              time: '12:16',
              avatar: 'https://placeimg.com/80/80/people',
              isMe: false
            }
          ]
        }
      ],
      activeConversationIndex: 0,
      newMessage: ''
    };
  },
  computed: {
    activeConversation() {
      return this.conversations[this.activeConversationIndex];
    }
  },
  methods: {
    selectConversation(index) {