<template>
<div class="todo">
<!-- 计算功能 -->
<input type="text" v-model="wantName" />
<button @click="addThing">aaaa</button>
<div v-for="(item,index) in dataList" v-bind:key="item.id" style="background-color: white">
<button @click="ifAgree(index)">{{ item.flag ? "通过" : "未通过" }}</button>
<span style="margin: 0 30px">{{ item.name||'无' }}</span>
<button @click="delet(index)">删除</button>
</div>
<span>还有{{num}}条未通过</span>
</div>
</template>
<script setup>
import { computed, reactive, ref } from "vue";
const wantName = ref(null);
const dataList = reactive([{ name: null, id: 0, flag: false }]);
const addThing = () => {
dataList.push({ name: wantName.value, id: new Date(), flag: false });
console.log(dataList);
};
const ifAgree = index => {
dataList[index].flag = !dataList[index].flag
};
const delet = index => {
dataList.splice(index,1);
};
const num = computed(()=>{
return dataList.filter(item=>!item.flag).length
})
</script>
过于简陋