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

news2025/2/27 0:50:09

代办事件案例

该案例，综合了前面所学的知识，列入点击事件绑定，双向绑定，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.value
    var addContentIs = addContent.value
    var addPlaceIs = addPlace.value
    var 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>