[Vue篇]vue3组合式API实现todo列表

今天的例子是使用vue3的一个新 API:computed()。它可以让我们创建一个计算属性 ref,这个 ref 会动态地根据其他响应式数据源来计算其 .value。计算属性会自动跟踪其计算中所使用的到的其他响应式状态,并将它们收集为自己的依赖。计算结果会被缓存,并只有在其依赖发生改变时才会被自动更新。下面用组合式 API的写法,实现一个可新增、删除的todo列表效果如下:

ToDo列表效果如下。

隐藏已完成todo效果:

新增一个【运动】todo效果:

该功能的实现:在vue3项目中创建一个todoList.vue文件,完整代码如下:

(样式有点丑,自己按需调整吧😂)

javascript 复制代码
<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>
相关推荐
努力也学不会java3 分钟前
【Java并发】深入理解synchronized
java·开发语言·人工智能·juc
星竹晨L20 分钟前
【C++】深入理解list底层:list的模拟实现
开发语言·c++
IT_陈寒22 分钟前
Redis性能翻倍秘籍:10个99%开发者不知道的冷门配置优化技巧
前端·人工智能·后端
豐儀麟阁贵31 分钟前
Java知识点储备
java·开发语言
LinXunFeng38 分钟前
Flutter - Melos Pub workspaces 实践
前端·flutter·架构
豐儀麟阁贵41 分钟前
2.3变量与常量
java·开发语言
艾小码41 分钟前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript
什么半岛铁盒2 小时前
C++11 多线程与并发编程
c语言·开发语言·c++
Kiri霧6 小时前
Linux下的Rust 与 C 的互操作性解析
c语言·开发语言·rust
雪芽蓝域zzs6 小时前
uniapp AES 加密解密
开发语言·uni-app·c#