首页vue2.0实现todolist

vue2.0实现todolist

时间: 2023-09-28 18:11:18 浏览: 110

好的，下面是一个简单的 Vue 2.0 实现 todolist 的例子：首先，我们需要创建一个 Vue 实例，并在 data 属性中定义一个数组 todos： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue Todo List Example</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>Todo List</h1> <input type="text" v-model="newTodo" placeholder="Add new todo"> <button @click="addTodo">Add</button> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="removeTodo(index)">Remove</button> </li> </ul> </div> <script> new Vue({ el: '#app', data: { todos: [], newTodo: '' }, methods: { addTodo: function() { if (this.newTodo.trim()) { this.todos.push(this.newTodo); this.newTodo = ''; } }, removeTodo: function(index) { this.todos.splice(index, 1); } } }); </script> </body> </html> ``` 在上面的例子中，我们在模板中使用了 v-model 指令来实现输入框和数据的双向绑定，使用了 v-for 指令来循环渲染 todos 数组中的每个元素。同时，我们定义了两个方法 addTodo 和 removeTodo 来实现添加和删除 todo 的功能。运行代码后，你应该可以看到一个简单的 Todo List 应用程序，你可以在输入框中添加新的 todo，也可以点击每个 todo 后面的 Remove 按钮来删除它。

阅读全文