<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 }}条 总分:{{ team_score }} 平均分:{{ 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>
标签:vue,十二,学习,item,score,nbsp,team,id,subject From: https://www.cnblogs.com/cocotun/p/17809047.html