1.使用v-for对数据进行渲染并按照语文成绩从高到低进行排序
<div id="sorting">
<table>
<tr v-for="(item,index) in sortScore">
<td>{{index}}</td>
<td>{{item.name}} </td>
<td>{{item.age}}</td>
<td>{{item.Chinese}}</td>
<td>{{item.english}}</td>
</tr>
</table>
<!-- <div>{{sortScore}} </div> -->
</div>
let b=new Vue({
el:"#sorting",
data:{
score:[
{name:'小明', age:10, Chinese:90,english:84},
{name:'小点', age:16, Chinese:56,english:80},
{name:'小飞', age:15, Chinese:78,english:79},
{name:'小况', age:17, Chinese:20,english:84},
],
},
computed:{
sortScore(){
return this.score.sort((a,b)=>{
return b.Chinese-a.Chinese;
})
}
}
})
效果如下:
2.使用v-for渲染列表、:class动态绑定样式、三元表达式判断条件选择绑定的样式
td{width: 50px; border: 1px solid #2C3E50; text-align: center;}
.red{color: red;}
.blue{color: blue;}
<div id="student">
<table>
<tr v-for="(item,index) in score">
<td>{{index}}</td>
<td>{{item.name}} </td>
<td>{{item.age}}</td>
<td :class="[item.Chinese>=90 ? goodScore : '',item.Chinese<60 ? badScore : '']">{{item.Chinese}}</td>
<td :class="[item.english>=90 ? goodScore : '',item.english<60 ? badScore : '']">{{item.english}}</td>
</tr>
</table>
</div>
let a=new Vue({
el:'#student',
data:{
score:[
{name:'小明', age:10, Chinese:90,english:94},
{name:'小点', age:16, Chinese:56,english:80},
{name:'小飞', age:15, Chinese:78,english:58},
{name:'小况', age:17, Chinese:20,english:84},
],
goodScore:'blue',
badScore:'red',
},
})
效果如下
学习笔记 如有不足 请多指教