排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的2x 3x图
- 不同的样式——:class
- 考虑分辨率的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
:屏幕分辨率从而加载不同的图片
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。