用Vue写一个通讯软件界面代码

可以参考下面的代码：

<template>
<div>
<div>
<h2>聊天界面</h2>
<div class="chat-container">
<div v-for="message in messages" :key="message.id" :class="message.sender">
<div class="message-text">{{ message.text }}</div>
</div>
</div>
<div class="input-container">
<input type="text" v-model="message" @keyup.enter="sendMessage" />
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
messages: [],
message: ''
};
},
methods: {
sendMessage() {
this.messages.push({
text: this.message,
sender: 'me'
});
this.message = '';
}
}
};
</script>