vue_music:排行榜rank中top-list.vue中樣式的實現:class

排行榜的歌曲列表，根據排名渲染不一樣的樣式，同時須要考慮分辨率的2x 3x圖

1. 不一樣的樣式——:class
2. 考慮分辨率的2x 3x圖——須要在stylu中的mixin中bgImage根據屏幕分辨率選擇圖片

1.功能

<div class="rank" v-show="rank">
  <span :class="getRankCls(index)">{{getRankText(index)}}</span>
</div>

在vue中綁定HTML Class，除了數組，對象語法，也能夠使用函數返回值(沒必要使用v-if v-else等複雜邏輯)

在methods中定義，返回相應的class

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

2.stylu處理分辨率

.icon
      display: inline-block
      width: 25px
      height: 24px
      background-size: 25px 24px
      &.icon0
        bg-image('first')
      &.icon1
        bg-image('second')
      &.icon2
        bg-image('third')

這裏邊重要的是bg-image函數

bg-image($url)
    background-image: url($url + "@2x.png")
    @media (-webkit-min-device-pixel-radio: 3),(min-device-pixel-radio: 3)
        background-image: url($url + "@3x.png")

device-pixel-radio:屏幕分辨率從而加載不一樣的圖片