[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>
相关推荐
Aczone2826 分钟前
硬件(六)arm指令
开发语言·汇编·arm开发·嵌入式硬件·算法
YA3331 小时前
java设计模式二、工厂
java·开发语言·设计模式
逐雨~1 小时前
9.8C++作业
开发语言·c++
我爱挣钱我也要早睡!2 小时前
Java 复习笔记
java·开发语言·笔记
Yang-Never3 小时前
Kotlin协程 -> Job.join() 完整流程图与核心源码分析
android·开发语言·kotlin·android studio
牧羊狼的狼3 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手5 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one5 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲5 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
TomCode先生5 小时前
c#动态树形表达式详解
开发语言·c#