快捷導(dǎo)航

vue3組合式API實(shí)現(xiàn)todo列表效果

更新時(shí)間：2024年08月09日 09:21:54 作者：遇見小美好

這篇文章主要介紹了vue3組合式API實(shí)現(xiàn)todo列表,下面用組合式?API的寫法,實(shí)現(xiàn)一個(gè)可新增、刪除的todo列表效果,需要的朋友可以參考下

今天的例子是使用vue3的一個(gè)新 API：computed()。它可以讓我們創(chuàng)建一個(gè)計(jì)算屬性 ref，這個(gè) ref 會動態(tài)地根據(jù)其他響應(yīng)式數(shù)據(jù)源來計(jì)算其 .value。計(jì)算屬性會自動跟蹤其計(jì)算中所使用的到的其他響應(yīng)式狀態(tài)，并將它們收集為自己的依賴。計(jì)算結(jié)果會被緩存，并只有在其依賴發(fā)生改變時(shí)才會被自動更新。下面用組合式 API的寫法，實(shí)現(xiàn)一個(gè)可新增、刪除的todo列表效果如下：

ToDo列表效果如下。

隱藏已完成todo效果：

新增一個(gè)【運(yùn)動】todo效果：

該功能的實(shí)現(xiàn)：在vue3項(xiàng)目中創(chuàng)建一個(gè)todoList.vue文件，完整代碼如下：

（樣式有點(diǎn)丑，自己按需調(diào)整吧??）

<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: '學(xué)習(xí)', 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>

到此這篇關(guān)于vue3組合式API實(shí)現(xiàn)todo列表的文章就介紹到這了,更多相關(guān)vue3 todo列表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue內(nèi)容分發(fā)slot(全面解析)
下面小編就為大家?guī)硪黄猇ue內(nèi)容分發(fā)slot(全面解析)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過動畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過動畫的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
這篇文章主要介紹了vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
vue中如何解除數(shù)據(jù)之間的雙向綁定
這篇文章主要介紹了vue中如何解除數(shù)據(jù)之間的雙向綁定，具有很好的參考價(jià)值，希望對
2022-09-09
Vue3配置代理后頁面500/404問題
這篇文章主要介紹了Vue3配置代理后頁面500/404問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
vue中的mvvm模式講解
今天小編就為大家分享一篇關(guān)于vue中的mvvm模式講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
解決Vue數(shù)據(jù)更新了但頁面沒有更新的問題
在vue項(xiàng)目中,有些我們會遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下
2023-08-08
詳解vue3+quasar彈窗的幾種方式
本文主要介紹了vue3+quasar彈窗的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問題
這篇文章主要介紹了vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue中ts無法識別引入的vue文件,提示找不到xxx.vue模塊的解決
這篇文章主要介紹了vue中ts無法識別引入的vue文件,提示找不到xxx.vue模塊的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09