写一个可以相互聊天的h5 聊天界面实例

好的，这里提供一个简单的H5聊天界面实例（基于Vue.js）：

<template>
  <div class="chat-container">
    <div class="chat-header">
      <h2>{{ contactName }}</h2>
    </div>
    <div class="chat-messages">
      <ul>
        <li v-for="message in messages" :key="message.id" :class="{ received: message.isReceived }">
          <div class="message-content">{{ message.content }}</div>
        </li>
      </ul>
    </div>
    <div class="chat-input">
      <input type="text" v-model="messageInput" @keyup.enter="sendMessage" placeholder="Type your message here...">
      <button @click="sendMessage">Send</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contactName: 'John Doe',
      messages: [
        {
          id: 1,
          content: 'Hi there!',
          isReceived: true
        },
        {
          id: 2,
          content: 'How are you?',
          isReceived: false
        }
      ],
      messageInput: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.messageInput !== '') {
        this.messages.push({
          id: this.messages.length + 1,
          content: this.messageInput,
          isReceived: false
        })
        this.messageInput = ''
      }
    }
  }
}
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.chat-header {
  padding: 10px;
  background-color: #f6f6f6;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

.chat-messages {
  flex: 1;
  overflow-y: scroll;
  padding: 10px;
}

.chat-messages ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-messages li {
  margin: 10px 0;
}

.chat-messages li.received {
  text-align: left;
}

.chat-messages li .message-content {
  display: inline-block;
  padding: 5px 10px;
  background-color: #f6f6f6;
  border-radius: 5px;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f6f6f6;
}

.chat-input input[type="text"] {
  flex: 1;
  padding: 5px;
  border-radius: 5px;
  border: none;
}

.chat-input button {
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #0069d9;
}
</style>

这个界面包含了一个聊天头部（显示对方名称）、聊天消息列表和一个输入框（包含发送按钮）。您可以根据您的实际需求进行修改和扩展。