脚本宝典收集整理的这篇文章主要介绍了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:屏幕分辨率从而加载不同的图片

脚本宝典总结

以上是脚本宝典为你收集整理的vue_music:排行榜rank中top-list.vue中样式的实现:class全部内容，希望文章能够帮你解决vue_music:排行榜rank中top-list.vue中样式的实现:class所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。