首页用vus.js语言实现1、点击"发送”按钮获取输入域的内容 2、把输入域的内容渲染在列表中 3、点击“删除”可以删除对应的心情

用vus.js语言实现1、点击"发送”按钮获取输入域的内容 2、把输入域的内容渲染在列表中 3、点击“删除”可以删除对应的心情

时间: 2024-10-29 10:17:30 浏览: 50

在Vue.js中实现上述功能，你可以按照以下步骤编写： 1. 首先，在HTML模板中设置输入框、按钮和列表： ```html <div> <input v-model="messageInput" placeholder="请输入心情"> <button @click="addMessage">发送</button> <ul id="messagesList"> <li v-for="(item, index) in messages" :key="index"> {{ item }} <button @click="deleteMessage(index)">删除</button> </li> </ul> </div> ``` 2. 然后，在`data`选项中定义消息数组和输入框值： ```javascript export default { data() { return { messageInput: '', messages: [], }; }, }; ``` 3. 在`methods`部分添加事件处理函数： ```javascript export default { methods: { addMessage() { this.messages.push(this.messageInput); this.messageInput = ''; }, deleteMessage(index) { if (index >= 0 && index < this.messages.length) { this.messages.splice(index, 1); } }, }, }; ``` 现在，当你点击“发送”按钮时，输入的内容会被添加到`messages`数组并在列表中显示；点击“删除”按钮会移除相应位置的消息。

阅读全文