你用vue写一个微信聊天页

好的，以下是一个简单的微信聊天页面的 Vue 实现，包括消息列表、输入框和发送按钮。这个例子中的数据是硬编码的，可以根据实际需求进行修改。

<template>
  <div class="chat-container">
    <div class="message-list">
      <div class="message" v-for="(message, index) in messages" :key="index">
        <div class="message-content">{{ message.content }}</div>
        <div class="message-time">{{ message.time }}</div>
      </div>
    </div>
    <div class="input-container">
      <input type="text" v-model="newMessage" class="message-input" />
      <button @click="sendMessage" class="send-button">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { content: '你好！', time: '2023-02-27 10:00:00' },
        { content: '最近怎么样？', time: '2023-02-27 10:05:00' },
        { content: '很好，谢谢。你呢？', time: '2023-02-27 10:10:00' },
        { content: '也很好，谢谢。', time: '2023-02-27 10:15:00' },
      ],
      newMessage: '',
    };
  },
  methods: {
    sendMessage() {
      const now = new Date();
      const time = `${now.getFullYear()}-${now.getMonth() +
        1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
      this.messages.push({ content: this.newMessage, time });
      this.newMessage = '';
    },
  },
};
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-list {
  flex: 1;
  overflow-y: scroll;
}

.message {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
}

.message-content {
  font-size: 16px;
}

.message-time {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  text-align: right;
}

.input-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.message-input {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  margin-right: 10px;
}

.send-button {
  padding: 10px;
  border-radius: 5px;
  background-color: #1aad19;
  color: #fff;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
</style>

在这个例子中，我们使用了 Vue 的模板语法来定义页面结构，并在 `<script>` 标签中定义了相应的数据和方法。

在 `data` 函数中，我们定义了 `messages` 数组，用于存储所有的聊天消息，和 `newMessage` 字符串，用于存储用户输入的新消息。`sendMessage` 方法用于将用户