VUE循环 排序 多条件判断添加样式

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',

                },

           })

效果如下

 

学习笔记 如有不足 请多指教