Vue實現(xiàn)成績增刪案例思路詳解

更新時間：2025年05月06日 14:20:52 作者：2301_81616961

這篇文章主要介紹了Vue實現(xiàn)成績增刪案例思路詳解,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧

案例功能需求

1.通過vue渲染數(shù)據(jù)，將成績的相關(guān)信息顯示出來（學號，學科，成績）
2.能夠增加相關(guān)的成績信息
3.能夠刪除相關(guān)的成績信息
4.能夠自動統(tǒng)計總分以及平均分
5.在沒有數(shù)據(jù)時，顯示特定內(nèi)容

案例實現(xiàn)

實現(xiàn)思路

數(shù)據(jù)渲染：
數(shù)據(jù)通過table表格來展示
通過v-for指令，將存儲在數(shù)組中的數(shù)據(jù)嵌入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>

自動統(tǒng)計：
總分：通過computed計算屬性，利用reduce()函數(shù),對數(shù)組的成績進行累加計算并返回累加結(jié)果

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

平均分：
調(diào)用之前設計進行累加的計算方法，將獲取的值除以信息總條數(shù)，獲取平均分，并將其返回

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

增加信息：

對輸入框添加v-model指令，進行數(shù)據(jù)的雙向綁定，將輸入的數(shù)據(jù)通過push()，放入存儲數(shù)據(jù)的數(shù)組中

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

刪除信息：

創(chuàng)建方法，傳入要刪除信息的id（學號），遍歷數(shù)組，將含有該id的信息從數(shù)組中刪除

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

顯示特定內(nèi)容：
通過v-if指令，當存儲數(shù)據(jù)的數(shù)組長度為0時，將其設為true，則能將內(nèi)容展示出來

<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">數(shù)據(jù)為空</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='輸入內(nèi)容不全'
                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>