扩展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;
     width: 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