Vue实现成绩增删案例思路详解

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

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

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

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

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

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