快捷導(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 會(huì)動(dòng)態(tài)地根據(jù)其他響應(yīng)式數(shù)據(jù)源來計(jì)算其 .value。計(jì)算屬性會(huì)自動(dòng)跟蹤其計(jì)算中所使用的到的其他響應(yīng)式狀態(tài)，并將它們收集為自己的依賴。計(jì)算結(jié)果會(huì)被緩存，并只有在其依賴發(fā)生改變時(shí)才會(huì)被自動(dòng)更新。下面用組合式 API的寫法，實(shí)現(xiàn)一個(gè)可新增、刪除的todo列表效果如下：

ToDo列表效果如下。

隱藏已完成todo效果：

新增一個(gè)【運(yùn)動(dòng)】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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vuex模塊化編碼使用詳解
本文介紹了 Vuex 的模塊化和命名空間功能,通過對(duì) store.js 進(jìn)行模塊劃分,提高代碼維護(hù)性和數(shù)據(jù)分類的明確性,并講解了在組件中讀取和操作模塊化 state、getters、actions、mutations 的具體方法
2025-10-10
Vue封裝數(shù)字框組件實(shí)現(xiàn)流程詳解
這篇文章主要介紹了Vue封裝數(shù)字框組件實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-04-04
詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-06-06
vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02
Vue文件的組織結(jié)構(gòu)不合理之優(yōu)化項(xiàng)目結(jié)構(gòu)詳解
在這篇博客中,我們將探討 Vue 文件組織結(jié)構(gòu)不合理的幾個(gè)常見問題,并提供解決方案,以幫助開發(fā)者創(chuàng)建更清晰、更高效的項(xiàng)目文件結(jié)構(gòu),希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
Vue3實(shí)現(xiàn)SSE連接的實(shí)現(xiàn)示例
SSE是一種允許服務(wù)器向?yàn)g覽器推送事件的技術(shù),與WebSocket不同,SSE 是單向的,本文就來介紹了Vue3實(shí)現(xiàn)SSE連接的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣都可以了解一下
2025-09-09
Vue中自定義全局組件的實(shí)現(xiàn)方法
這兩天學(xué)習(xí)了Vue.js 感覺組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以這篇文章主要給大家介紹了關(guān)于Vue中自定義全局組件的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
vue3+ts+Vuex中使用websocket協(xié)議方式
這篇文章主要介紹了vue3+ts+Vuex中使用websocket協(xié)議方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue實(shí)現(xiàn)路由傳參的四種方式
在單頁應(yīng)用里,路由是連接頁面與數(shù)據(jù)的橋梁,Vue Router 提供了四種方式把「參數(shù)」從地址欄、內(nèi)存甚至編譯期注入到組件,理解它們的差異,才能在面試和線上故障中游刃有余,下面小編為大家詳細(xì)介紹一下
2025-09-09
Vue2.x響應(yīng)式簡(jiǎn)單講解及示例
這篇文章主要介紹了Vue2.x響應(yīng)式及簡(jiǎn)單的示例，應(yīng)用了簡(jiǎn)單的源代碼進(jìn)行講解，感興趣的小伙伴可以參考一下，希望可以幫助到你
2021-08-08