Vue实现成绩增删案例思路详解
作者：2301_81616961
案例功能需求
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=" rel="external nofollow" rel="external nofollow" 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=" rel="external nofollow" rel="external nofollow" 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=true
this.tt1=false
}else{
this.show02='输入内容不全'
this.tt2=false
this.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>功能演示
初始页面
增添信息
删除信息
无数据
案例小结
1.要在不同的情况下，显示不同的页面，可以通过v-if或v-show指令实现。v-if只有在true时，才会进行页面的渲染，而v-show无论什么情况都会进行页面的渲染。
2.v-bind指令，可以用来改变属性值（class、href、style），通过数组或对象来存放属性值。以class为例，对象{类名 ，布尔型（true,false）}，当为true时，该类才会添加到元素中。数组[类名 ， 类名]，适合用来一次性添加大量类名或删除。
3.computed属性通常是用来返回值，也就是可读的。在进行调试时，若给定义的计算属性赋值，会发现，值不会改变。若需要一个可读写的计算属性，可以通过定义get、set进行实现。
到此这篇关于Vue实现成绩增删案例的文章就介绍到这了,更多相关Vue成绩增删内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！