用vue写todolist
时间: 2023-06-11 20:06:37 浏览: 81
好的,下面是一个简单的 Vue TodoList 示例:
首先,创建一个 TodoList 组件,包含一个输入框和一个待办事项列表:
```
<template>
<div>
<input v-model="newTodo" @keyup.enter="addTodo">
<ul>
<li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: [],
};
},
methods: {
addTodo() {
if (this.newTodo) {
this.todos.push(this.newTodo);
this.newTodo = '';
}
},
},
};
</script>
```
在上面的代码中,我们利用 `v-model` 指令将输入框的值和组件的 `newTodo` 数据绑定在一起,利用 `@keyup.enter` 监听键盘回车键,当用户按下回车键时,调用 `addTodo` 方法将新的待办事项添加到 `todos` 数组中。
接下来,我们可以在 `App.vue` 组件中使用 TodoList 组件:
```
<template>
<div>
<h1>TodoList</h1>
<TodoList />
</div>
</template>
<script>
import TodoList from './components/TodoList.vue';
export default {
components: {
TodoList,
},
};
</script>
```
现在我们已经完成了一个简单的 Vue TodoList 示例,可以在输入框中输入待办事项,按下回车键后将其添加到待办事项列表中。
相关推荐
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)