vue实现todolist
时间: 2023-09-28 21:04:13 浏览: 49
好的,下面是一个简单的Vue实现todolist的例子:
首先在HTML中定义一个输入框和一个按钮,用于添加待办事项:
```
<div id="app">
<input v-model="newTodo" placeholder="Add a new todo">
<button @click="addTodo">Add</button>
</div>
```
然后在Vue实例中定义一个data属性newTodo,用于存储用户输入的待办事项,以及一个todos数组,用于存储所有的待办事项:
```
new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo() {
this.todos.push(this.newTodo);
this.newTodo = '';
}
}
});
```
最后,在页面中使用v-for指令遍历todos数组,将所有的待办事项渲染出来:
```
<div id="app">
<input v-model="newTodo" placeholder="Add a new todo">
<button @click="addTodo">Add</button>
<ul>
<li v-for="todo in todos">{{ todo }}</li>
</ul>
</div>
```
这样,当用户在输入框中输入待办事项并点击添加按钮时,该待办事项就会被添加到todos数组中,并且新的待办事项列表会自动在页面中渲染出来。