vue3组合式API实现todo列表效果
作者：遇见小美好
这篇文章主要介绍了vue3组合式API实现todo列表,下面用组合式 API的写法,实现一个可新增、删除的todo列表效果,需要的朋友可以参考下
今天的例子是使用vue3的一个新 API：computed()。它可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value。计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。下面用组合式 API的写法，实现一个可新增、删除的todo列表效果如下：
ToDo列表效果如下。
隐藏已完成todo效果：
新增一个【运动】todo效果：
该功能的实现：在vue3项目中创建一个todoList.vue文件，完整代码如下：
（样式有点丑，自己按需调整吧😂）
<script setup>
import { ref, computed } from 'vue'
let id = 0
const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
{ id: id++, text: '吃饭', done: true },
{ id: id++, text: '睡觉', done: true },
{ id: id++, text: '学习', done: false }
])
const filteredTodos = computed(() => {
return hideCompleted.value
? todos.value.filter((t) => !t.done)
: todos.value
})
function addTodo() {
todos.value.push({ id: id++, text: newTodo.value, done: false })
newTodo.value = ''
}
function removeTodo(todo) {
todos.value = todos.value.filter((t) => t !== todo)
}
</script>
<template>
<form @submit.prevent="addTodo">
<input v-model="newTodo" required placeholder="new todo">
<button>Add Todo</button>
</form>
<ul>
<li v-for="todo in filteredTodos" :key="todo.id">
<input type="checkbox" v-model="todo.done">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="removeTodo(todo)">X</button>
</li>
</ul>
<button @click="hideCompleted = !hideCompleted">
{{ hideCompleted ? 'Show all' : 'Hide completed' }}
</button>
</template>
<style>
.done {
text-decoration: line-through;
}
</style>到此这篇关于vue3组合式API实现todo列表的文章就介绍到这了,更多相关vue3 todo列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！