扩展music-list.vue让列表前三名显示🏆奖杯

1.在music-list.vue中写DOM

 <li  @click="seletItem(song,index)"    class="song-item" v-for="(song,index) of songs">
           <div class="rank" v-show="rank">
             <span :class="getRankCls(index)" v-text="getRankText(index)"></span>
           </div>
           <div class="song-name">{{song.name}}</div>
           <div class="describe">{{getDesc(song)}}</div>
         </li>

2.传props:

  rank:{
          type:Boolean,
          default:false
        }

3.在不同的索引前，加上不同的类来显示奖杯：

  .icon{
    display: inline-block;
     25px;
    height: 24px;
    background-size: 25px 24px;
  }
  .icon0{
    background-image: url("./first@2x.png");
  }
  .icon1{
    background-image: url("./second@2x.png");

  }
  .icon2{
    background-image: url("./third@2x.png");

  }

4.添加类的方法：

      getRankCls(index){
        if(index<=2){
          return `icon icon${index}`
        }else{
          return 'text'
        }
      },
      getRankText(index){
        if(index>2){
          return index+1
        }
      }

5.在music-list中调用时候传入rank

  <song-list  @select="selectItem"  :songs="songs"  :rank="rank" ></song-list>
//在data中将rank默认值设置为true