快捷導(dǎo)航

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

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

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

案例功能需求

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

案例實(shí)現(xiàn)

實(shí)現(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>

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

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

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

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

增加信息：

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

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

刪除信息：

創(chuàng)建方法，傳入要?jiǎng)h除信息的id（學(xué)號），遍歷數(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指令，當(dāng)存儲數(shù)據(jù)的數(shù)組長度為0時(shí)，將其設(shè)為true，則能將內(nèi)容展示出來

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

完整代碼

<template>
    <table>
        <thead>
            <tr>
                <th>學(xué)號</th>
                <th>學(xué)科</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="">學(xué)號：</label>
            <input type="text" name="" id="" v-model="t1">
        </span><br>
        <span>
            <label for="">學(xué)科：</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>

功能演示

初始頁面

增添信息

刪除信息

無數(shù)據(jù)

案例小結(jié)

1.要在不同的情況下，顯示不同的頁面，可以通過v-if或v-show指令實(shí)現(xiàn)。v-if只有在true時(shí)，才會進(jìn)行頁面的渲染，而v-show無論什么情況都會進(jìn)行頁面的渲染。

2.v-bind指令，可以用來改變屬性值（class、href、style），通過數(shù)組或?qū)ο髞泶娣艑傩灾怠Ｒ詂lass為例，對象{類名，布爾型（true,false）}，當(dāng)為true時(shí)，該類才會添加到元素中。數(shù)組[類名，類名]，適合用來一次性添加大量類名或刪除。

3.computed屬性通常是用來返回值，也就是可讀的。在進(jìn)行調(diào)試時(shí)，若給定義的計(jì)算屬性賦值，會發(fā)現(xiàn)，值不會改變。若需要一個(gè)可讀寫的計(jì)算屬性，可以通過定義get、set進(jìn)行實(shí)現(xiàn)。

到此這篇關(guān)于Vue實(shí)現(xiàn)成績增刪案例的文章就介紹到這了,更多相關(guān)Vue成績增刪內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: