zoukankan      html  css  js  c++  java
  • 扩展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      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
  • 相关阅读:
    Java 多线程系列02
    Java 多线程系列01
    java io流03 字符流
    java JDBC系列
    java io流02 字节流
    Helidon使用心得
    camel 解析
    Spring 源码分析
    java代码实现分页功能
    SpringBoot Tomcat启动报错
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9469187.html
Copyright © 2011-2022 走看看