首页vue todolist完整案例代码一个页面

vue todolist完整案例代码一个页面

时间: 2024-05-15 14:13:08 浏览: 118

以下是一个简单的 Vue Todolist 完整案例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue Todolist</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>Vue Todolist</h1> <form v-on:submit.prevent="addItem"> <input type="text" v-model="newItem" placeholder="Add a new item..."> <button type="submit">Add</button> </form> <ul> <li v-for="(item, index) in items"> {{ item }} <button v-on:click="removeItem(index)">Remove</button> </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items: ['Buy groceries', 'Do laundry', 'Pay bills'], newItem: '' }, methods: { addItem: function() { if (this.newItem !== '') { this.items.push(this.newItem); this.newItem = ''; } }, removeItem: function(index) { this.items.splice(index, 1); } } }); </script> </body> </html> ``` 该代码包括一个包含输入框和添加按钮的表单，以及一个用于显示待办事项列表的无序列表。用户可以输入新待办事项并单击“添加”按钮将其添加到列表中，也可以单击每个项目旁边的“删除”按钮将其从列表中删除。此外，该代码还使用 Vue 的数据绑定和方法来跟踪和操作待办事项列表。

阅读全文