当前位置：首页 > news >正文

Vue实现成绩增删案例

news 来源：原创 2025/5/7 13:17:34

Vue实现成绩增删案例

案例功能需求
案例实现
- 实现思路
- 完整代码
- 功能演示
案例小结

案例功能需求

1.通过vue渲染数据，将成绩的相关信息显示出来（学号，学科，成绩）
2.能够增加相关的成绩信息
3.能够删除相关的成绩信息
4.能够自动统计总分以及平均分
5.在没有数据时，显示特定内容

案例实现

实现思路

数据渲染：
数据通过table表格来展示
通过v-for指令，将存储在数组中的数据嵌入td

 <tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td>{{item.score}}</td><td><a href=""  @click.prevent="del(item.id)">删除</a></td></tr>

自动统计：
总分：通过computed计算属性，利用reduce()函数,对数组的成绩进行累加计算并返回累加结果

return this.list.reduce((sum, item) => sum + Number(item.score), 0)

平均分：
调用之前设计进行累加的计算方法，将获取的值除以信息总条数，获取平均分，并将其返回

return (this.show01 /this.list.length).toFixed(2)

增加信息：

对输入框添加v-model指令，进行数据的双向绑定，将输入的数据通过push()，放入存储数据的数组中

this.list.push({id:this.t1,subject:this.t2,score:this.t3})

删除信息：

创建方法，传入要删除信息的id（学号），遍历数组，将含有该id的信息从数组中删除

for(let i=0;i<this.list.length;i++){if(this.list[i].id==ID){this.list.splice(i,1)return;}}

显示特定内容：
通过v-if指令，当存储数据的数组长度为0时，将其设为true，则能将内容展示出来

<tbody v-if="ifshow<=0? true:false"></thbody>

完整代码

<template><table><thead><tr><th>学号</th><th>学科</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="ifshow>0? true:false"><tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td>{{item.score}}</td><td><a href=""  @click.prevent="del(item.id)">删除</a></td></tr><tr class="tr_01"><td colspan="2" class="td1">总分：{{show01}}</td><td colspan="2" class="td2">平均分：{{ave}}</td></tr></tbody><tbody v-if="ifshow<=0? true:false"><tr><td colspan="4" class="td_01">数据为空</td></tr></tbody></table><div class="div_01"><label :class="{red :tt1,green: tt2}">{{show02}}</label><br><span><label for="">学号：</label><input type="text" name="" id="" v-model="t1"></span><br><span><label for="">学科：</label><input type="text" name="" id=""  v-model="t2"></span><br><span><label for="">成绩：</label><input type="text" name="" id=""  v-model="t3"></span><br><input type="submit" value="添加"  @click="add"></div>
</template><script>console.log(new Date())export default {data() {return {list:[{id:101,subject:'语文',score:99.9}],t1:"",t2:"",t3:"",show02:"",tt1:"",tt2:""}},methods:{del(ID){for(let i=0;i<this.list.length;i++){if(this.list[i].id==ID){this.list.splice(i,1)return;}}},add(){if(this.t1!=""&&this.t2!=""&&this.t3!=""){this.list.push({id:this.t1,subject:this.t2,score:this.t3})this.show02='正确'this.tt2=truethis.tt1=false}else{this.show02='输入内容不全'this.tt2=falsethis.tt1=true}this.t1=this.t2=this.t3=""console.log(this.tt1)console.log(this.tt2)},},computed:{ifshow(){return this.list.length},show01(){return this.list.reduce((sum, item) => sum + Number(item.score), 0)},ave() {if (this.list.length === 0) {return 0}else{return (this.show01 / this.list.length).toFixed(2)}},}}
</script><style>*{margin: 0;padding: 0;}table{border: 1px solid black;/* 合并 */border-collapse: collapse;margin: 5px;}th,td{border: 1px solid black;width: 100px;height: 50px;text-align: center;}.td_01{height: 130px;}.tr_01 td{border: none;}.td1{text-align: right;padding-right: 10px;}.td2{text-align: left;padding-left: 10px;}.div_01{position: fixed;left: 500px;top: 30px;}label{font-size: 18px;}input[type="text"]{width: 175px;height: 25px;}input[type="submit"]{display: block;margin: 5px auto;width: 47px;height: 27px;}.red{margin-left: 50px;color: red;}.green{margin-left: 50px;color: green;}
</style>