Vue实现成绩增删案例

最新推荐文章于 2025-05-05 22:15:46 发布

2301_81616961

最新推荐文章于 2025-05-05 22:15:46 发布

阅读量815

点赞数 10

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_81616961/article/details/147687901

版权

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=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>