uniapp vue2 简单聊天模板

以下是一个基于 Vue 2 的简单聊天模板示例：

<template>
  <div>
    <div v-for="(msg, index) in messages" :key="index">
      <div v-if="msg.type === 'sent'"> <!-- 发送的消息 -->
        <div class="sent-msg">{{ msg.content }}</div>
      </div>
      <div v-else> <!-- 接收的消息 -->
        <div class="received-msg">{{ msg.content }}</div>
      </div>
    </div>
    <div class="input-area">
      <input type="text" v-model="newMessage" @keyup.enter="sendMessage">
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { type: 'received', content: '你好' },
        { type: 'sent', content: '你好，我是uniapp' },
        { type: 'received', content: '很高兴认识你' }
      ],
      newMessage: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.newMessage) {
        this.messages.push({ type: 'sent', content: this.newMessage })
        this.newMessage = ''
      }
    }
  }
}
</script>

<style>
.sent-msg {
  background-color: #ddf0ff;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  float: right;
}

.received-msg {
  background-color: #f0f0f0;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  float: left;
}

.input-area {
  margin-top: 20px;
}
</style>

和上面的示例类似，这个模板中也有一个 `messages` 数组用于存储聊天记录，有一个 `newMessage` 变量用于存储当前输入的消息。在页面中，使用 `v-for` 循环渲染 `messages` 数组中的每个元素，根据 `type` 属性来判断是发送的消息还是接收的消息，从而显示不同的样式。在输入框中输入消息后，按下回车键或点击发送按钮就可以将消息添加到 `messages` 数组中。