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

1.在music-list.vue中写DOM

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

2.传props:

1   rank:{
2           type:Boolean,
3           default:false
4         }

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

 1   .icon{
 2     display: inline-block;
 3     width: 25px;
 4     height: 24px;
 5     background-size: 25px 24px;
 6   }
 7   .icon0{
 8     background-image: url("./first@2x.png");
 9   }
10   .icon1{
11     background-image: url("./second@2x.png");
12 
13   }
14   .icon2{
15     background-image: url("./third@2x.png");
16 
17   }

4.添加类的方法：

 1       getRankCls(index){
 2         if(index<=2){
 3           return `icon icon${index}`
 4         }else{
 5           return 'text'
 6         }
 7       },
 8       getRankText(index){
 9         if(index>2){
10           return index+1
11         }
12       }

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

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

 

posted @ 2018-08-13 16:43  前端极客  阅读(602)  评论(0)  编辑  收藏  举报