Vue3 todos列表demo

<template>
    <h2>Vue3 todos列表</h2>
    <p><input type="text" v-model="test" @keydown.enter="addItem"></p>
    <table border="1" cellpadding="0" cellspacing="0" style="margin: 0 auto;width: 500px;">
        <tr>
            <td>筛选</td>
            <td>序号</td>
            <td>任务</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
        <tr v-for="(item, index) in filterList" :key="item.id">
            <td><input type="checkbox" v-model="item.done"></td>
            <td>{
   
   { index+ 1}}</td>
            <td>{
   
   { item.text }}</td>
            <td>{
   
   { item.done ? "完成" : "未完成" }}</td>
            <td><a href="#" @click.prevent="removeItem(item.id)">删除</a></td>
        </tr>
    </table>
    <p><input type="checkbox" v-model="allChecked">展示全部</p>
    <p>已完成 <b>{
   
   { doneLength }}</b> / 总数<b>{
   
   { list.length }}</b></p>
</template>

<script setup>
import { reactive, computed, ref } from "vue";

const {
    list,
    test,
    allChecked,
    addItem,
    removeItem,
    filterList,
    doneLength
} = todoList()

function todoList() {
    // 列表
    const list = reactive([
        {
            id: 1,
            text: "吃饭",
            done: false
        },
        {
            id: 2,
            text: "睡觉",
            done: false
        },
        {
            id: 3,
            text: "打豆豆",
            done: true
        }
    ])
    const test = ref("")
    const nextId = (4)
    const allChecked = ref(false)
    // 回车添加
    const addItem = () => {
        if (!test.value.trim()) return
        const obj = {
            id: nextId.value,
            text: test.value,
            done: false
        }
        list.push(obj)
        test.value = ""
        nextId.value++
    }
    //删除一项数据 
    const removeItem = (id) => {
        const index = list.findIndex(el => el.id == id)
        list.splice(index, 1)
    }
    // 筛选todos列表
    const filterList = computed(() => list.filter(el => !el.done || allChecked.value))
    //筛选已经完成的任务
    const doneLength = computed(() => list.filter(el => el.done).length)
    return {
        list,
        test,
        allChecked,
        addItem,
        removeItem,
        filterList,
        doneLength
    }
}
</script>