vue3組合式API實(shí)現(xiàn)todo列表效果
今天的例子是使用vue3的一個(gè)新 API：computed()。它可以讓我們創(chuàng)建一個(gè)計(jì)算屬性 ref，這個(gè) ref 會(huì)動(dòng)態(tài)地根據(jù)其他響應(yīng)式數(shù)據(jù)源來(lái)計(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: '睡覺(jué)', 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)文章希望大家以后多多支持腳本之家！
- vue3實(shí)現(xiàn)一個(gè)todo-list
- vue組件編寫之todolist組件實(shí)例詳解
- 使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
- vue實(shí)現(xiàn)留言板todolist功能
- 詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList
- Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
- 基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目
- vue實(shí)現(xiàn)todolist單頁(yè)面應(yīng)用
- vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
相關(guān)文章
下面小編就為大家?guī)?lái)一篇Vue內(nèi)容分發(fā)slot(全面解析)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
這篇文章主要介紹了vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue中如何解除數(shù)據(jù)之間的雙向綁定，具有很好的參考價(jià)值，希望對(duì)2022-09-09
這篇文章主要介紹了Vue3配置代理后頁(yè)面500/404問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
今天小編就為大家分享一篇關(guān)于vue中的mvvm模式講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
解決Vue數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的問(wèn)題
在vue項(xiàng)目中,有些我們會(huì)遇到修改完數(shù)據(jù),但是視圖卻沒(méi)有更新的情況,具體的場(chǎng)景不一樣,解決問(wèn)題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下2023-08-08
本文主要介紹了vue3+quasar彈窗的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問(wèn)題
這篇文章主要介紹了vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue中ts無(wú)法識(shí)別引入的vue文件,提示找不到xxx.vue模塊的解決
這篇文章主要介紹了vue中ts無(wú)法識(shí)別引入的vue文件,提示找不到xxx.vue模塊的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09