用Vue写一个todolist
时间: 2023-04-01 10:02:37 浏览: 78
好的,我可以回答这个问题。使用Vue可以很方便地实现一个todolist,可以使用Vue的组件化思想,将任务列表和添加任务的表单分别封装成组件,然后在父组件中引用这些组件,实现一个完整的todolist应用。同时,可以使用Vue的数据绑定和计算属性等特性,方便地实现任务的添加、删除、标记完成等功能。
相关问题
使用Vue3.0完成一个todolist
好的,下面是一个简单的 Vue3.0 Todolist 示例代码:
```html
<template>
<div>
<h1>Todolist</h1>
<form @submit.prevent="addTodo">
<input type="text" v-model="newTodo" placeholder="Add a new todo">
<button>Add</button>
</form>
<ul>
<li v-for="(todo, index) in todos" :key="index">
<input type="checkbox" v-model="todo.completed" @change="toggleTodoStatus(index)">
<span :class="{completed: todo.completed}">{{ todo.text }}</span>
<button @click="removeTodo(index)">X</button>
</li>
</ul>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
newTodo: '',
todos: [],
});
const addTodo = () => {
if (state.newTodo.trim() !== '') {
state.todos.push({ text: state.newTodo, completed: false });
state.newTodo = '';
}
};
const toggleTodoStatus = (index) => {
state.todos[index].completed = !state.todos[index].completed;
};
const removeTodo = (index) => {
state.todos.splice(index, 1);
};
return {
newTodo: state.newTodo,
todos: state.todos,
addTodo,
toggleTodoStatus,
removeTodo,
};
},
};
</script>
<style>
.completed {
text-decoration: line-through;
}
</style>
```
这是一个基本的 Todolist 组件,使用了 Vue3.0 的 Composition API 和响应式数据。在模板中,使用了 v-model 指令来双向绑定输入框和数据,使用 v-for 指令来循环渲染列表项。在 setup 函数中,使用了 reactive 函数来创建响应式数据对象,使用了箭头函数来定义组件的方法。在样式中,使用了伪类选择器 :class 来动态添加类名,实现对已完成的任务的样式修改。
用vue写todolist
好的,下面是一个简单的 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 示例,可以在输入框中输入待办事项,按下回车键后将其添加到待办事项列表中。