<div class="input-container" v-show="isShowMessage">
<input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type your message here..." />
</div>
<script>
export default {
data() {
return {
messages: [],
newMessage: "",
isShowMessage: false,
};
},
methods: {
sendMessage() {
if (this.newMessage.trim() !== "") {
this.messages.push(this.newMessage.trim());
this.newMessage = "";
}
},
},
};
</script>
这段代码用于将用户在输入框中输入的消息添加到消息列表中,具体步骤如下:
检查用户输入的消息是否为空格或空字符串(通过trim()方法去除消息字符串两端的空格并判断是否为空字符串)。
如果消息非空,则将其添加到消息列表中(通过push()方法将消息添加到this.messages数组末尾)。
清空输入框的内容(通过将this.newMessage设置为空字符串)。
这样做的目的是为了确保只有非空的消息才被添加到消息列表中,并且每次添加消息后清空输入框的内容,以便用户继续输入下一条消息。