vue实现基本对话功能

在Vue中实现基本的聊天功能，你可以创建一个简单的组件，其中包括发送和接收消息的逻辑。以下是一个基本的示例：

<template>
  <div class="chat-container">
    <div class="messages">
      <div v-for="message in messages" :key="message.id" class="message">
        <div class="message-content">{{ message.content }}</div>
      </div>
    </div>
    <form @submit.prevent="sendMessage">
      <input v-model="newMessage" type="text" placeholder="Enter message" />
      <button type="submit">Send</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: ''
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        this.messages.push({
          id: Date.now(),
          content: this.newMessage
        });
        this.newMessage = '';
      }
    }
  }
};
</script>
 
<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.messages {
  overflow-y: scroll;
  flex: 1;
}
.message {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.message-content {
  margin-left: 10px;
  word-break: break-all;
}
form {
  display: flex;
}
input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}
button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

这个组件包括了一个消息列表和一个表单，用户可以在表单中输入消息并发送。当用户提交表单时，sendMessage 方法会被触发，新消息会被添加到消息列表中，并清空输入框以便输入新消息。