vue学习十二

<div id="app12">
        <table style="width: 300px;height: 160px;background-color: aquamarine;" cellspacing=0>
            <tbody>
                <tr class="biaotou">
                    <td>编号</td>
                    <td>学科</td>
                    <td>成绩</td>
                    <td>操作</td>
                </tr>
                <tr v-if="status === 0" style="height: 30px;"
                v-for="(item,index) in list" :key="item.id">
                    <td>{{ index+1 }}</td>
                    <td>{{ item.subject }}</td>
                    <td :class="{ red : item.score < 60}">{{ item.score }}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
                <tr v-if="status === 1"><td colspan="4">历史数据已过期</td></tr>
                <tr v-if="status === 2"><td colspan="4">仍未获取任何数据</td></tr>
                <tr></tr>
                <tr style="height: 15px;background-color: gray;">
                    <td colspan="4" style="text-align: left;font-size: 6px;"><label style="padding-left: 10%;">
                        合计:{{ list.length }}条
                        &nbsp;&nbsp;
                        总分:{{ team_score }}
                        &nbsp;&nbsp;
                        平均分:{{ team_average }}
                    </label></td></tr>
            </tbody>
        </table>
    </div>
    <script>
        const app12=new Vue({
            el:'#app12',
            data:{
                all:0,
                status:0,
                list:[
                    { id:1,subject:'语文',score:90 },
                    { id:2,subject:'数学',score:95 },
                    { id:3,subject:'英语',score:100 }
                ]
            },
            computed:{
                team_score(){     
                    let temp=0
                    for(let i=0;i<this.list.length;i++){
                        temp=temp+this.list[i].score
                    }
                    this.all=temp
                    return temp.toFixed(2)
                },
                team_average(){
                    if(this.list.length === 0){return 0}
                    return (this.all / this.list.length).toFixed(2)
                }
            },
            methods:{
                del(id){
                    this.list=this.list.filter(item => item.id !== id)
                }
            }
        })
    </script>