vue代办事件案例实战练习，配有答案解析

代办事件案例

该案例，综合了前面所学的知识，列入点击事件绑定，双向绑定，v-for循环语句，v-model双向绑定，以及input标签的不同type形式。

演示代码如下：

<template >
<div id="kuagjia"><div ><div class="top"><span style="margin-left: -700px;">学习计划表</span></div><div class="hang1"><div>学习科目<input type="text" placeholder="请输入学习科目" v-model="addSj"></div><div>学习内容<textarea placeholder="请输入学习内容" v-model="addContent" ></textarea></div><div>学习地点<select v-model="addPlace"><option>自习室</option><option>教室</option><option>图书馆</option></select></div><div><button @click="addImg">添加</button></div></div></div><div><table id="table" border="1px" cellspacing="0"><thead><tr><th>序号</th><th>学习科目</th><th>学习内容</th><th>学习地点</th><th>完成状态</th><th>操作</th></tr></thead><tbody  ><tr v-for="(i,index) in arrImg"><td>{{ index+1 }}</td><td>{{ i.sj }}</td><td>{{ i.content }}</td><td>{{ i.place }}</td><td ><label class="switch"><input type="checkbox"   v-model="i.status"     ><span class="slider round"></span></label>{{ i.status ? "完成":"未完成" }}</td><td @click="delImg(i.id, i.status)">删除</td></tr></tbody></table></div>
</div></template><script setup>
import {ref}  from  'vue';
const addSj = ref('')
const addContent = ref('')
const addPlace = ref('')
const ids = ref(1)
const arrImg =ref([]) const addImg = () =>{if (addSj.value === '' || addContent.value === ''){alert('学习科目和学习内容都不能为空')}else{var addSjIs = addSj.valuevar addContentIs = addContent.valuevar addPlaceIs = addPlace.valuevar idss = ids.value++var a = {id : idss, sj : addSjIs, content : addContentIs, place : addPlaceIs, status: false}arrImg.value.push(a)}
}
const delImg = (id, status) =>{if (status) {arrImg.value = arrImg.value.filter(x => x.id != id )}else{alert('没有做完是不会被删除的')}}
</script><style>
#kuagjia{width: 800px;height: 400px;border: 1xp solid;background-color: antiquewhite;
}
.top{width: 800px;height: 30px;background-color: gray;padding-left: 0px;}
.hang1{display: flex;}
#table{border: 1px solid;width: 800px;margin-top: 20px;}
/* 开关 */
/* 开关 - 滑块周围的框 */
.switch {--width:22px;position: relative;display: inline-block;width: calc(var(--width) * 2);height: var(--width);
}/* 隐藏默认 HTML 复选框 */
.switch input {opacity: 0;width: 0;height: 0;
}/* 滑块 */
.slider {position: absolute;top: 0;left: 0;right: 0;bottom: 0;cursor: pointer;background-color: #ccc;transition: .4s;
}/* 轨道*/
.slider.round {border-radius: 34px;
}
/* 圆形滑块 */
.slider.round::before {border-radius: 50%;
}.slider::before {position: absolute;content: "OFF"; height: var(--width);width: var(--width);left: 0px;bottom: 0px;background-color: white;-webkit-transition: .4s;transition:all .4s;font-size: 10px;text-align: center;line-height: var(--width);color: #ccc;
}input:checked+.slider {background-color: #2196F3;
}input:checked+.slider:before {transform: translateX(var(--width));content: "ON"; color: #2196F3;
}
button{background-color: #ccc;margin-left: 20px;
}
</style>

效果如下

在输入框的提示下输入内容，点击添加按钮就会自动添加代办任务，还有完成状态的调整功能，若任务未完成，点击删除是不会有效果的！！！如果第2次添加的内容已经在表中存在，会提示用户，无需重复添加。

在这里插入图片描述

当代办案例邂逅统计完成的个数，则会出现另一个版本的代办案例

代码如下：

<template><div class="main"><h2>代办事项</h2><input id="task" type="text" placeholder="请填写任务" @keyup.enter.exact="add" v-model="content"><ul><li v-for="item in display" @mouseover="flag = true" @mouseleave="flag = false"><div  id="list"><input type="checkbox" v-model="item.status"><span v-if="!item.status">{{ item.name }}</span><span v-else> <del> {{ item.name }} </del></span><div><i v-show="flag" @click="del(item.id)">X</i></div></div><hr></li></ul><div id="footer"><div id="tips">共有{{ display.length }} {{ which }}条任务 </div><div><button @click="which = '全部'">全部</button><button @click="which = '待办'">待办</button><button @click="which = '已办'">已办</button></div></div></div>
</template>
<script setup>import { ref, computed } from 'vue';const flag = ref(false);
const content = ref("");
const which = ref("全部")const arr = ref([{ name: '晨练', id: 1, status: false },{ name: '练书法', id: 2, status: false }
])const display = computed(() => {if (which.value == "全部") {return arr.value;} else if (which.value == "待办") {return arr.value.filter(x => !x.status);} else {return arr.value.filter(x => x.status);}
})const add = () => {let item = { name: content.value, id: arr.value.length + 1, status: false };arr.value.push(item);content.value = "";
}const del = (id) => {arr.value = arr.value.filter(x => x.id != id)
}</script><style scoped>
.main {display: flex;flex-direction: column;align-items: flex-start;
}h2 {align-self: center
}ul {list-style-type: none;padding: 0px;
}#list {display: flex;justify-content: space-between;min-width: 500px;
}ul li div {min-width: 50px;margin: 0px;
}#task {min-width: 500px;
}#footer {display: flex;min-width: 500px;justify-content: space-between;}#tips {display: flex;align-items: center;
}#footer button {border: 0px;background-color: transparent;
}#footer button:active {background-color: aqua;
}
</style>