<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>
Vue3 todos列表demo
猜你喜欢
转载自blog.csdn.net/qq_43770056/article/details/128862335
今日推荐
周排行