携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第32天，点击查看活动详情
上一篇文章中我们完成了轮播图下面的四个宫格以及其跳转功能，接下来我们将要完成下面的推荐歌单部分，具体的样式如下图所示：
- 首先是顶部的推荐歌单以及更多两个文字部分，这里推荐歌单需要加粗显示，更多是一个button按钮，属性为镂空状态。这里的HTML代码部分如下所示
<div class="tuijian">推荐歌单</div>
<van-button round type="default" size="mini">更多></van-button>
css样式部分就是flex布局以及justify-content: space-between两侧居中排布
-
然后歌单里面的图片需要请求数据来获得，npm安装好axios之后在mounted里面使用axios的get方法请求数据，并return一个musicList空数组，将请求到的数据res赋值到musicList里面，这样我们就拿到了歌单的图片，标题，播放量以及里面的歌曲信息，之后只需要渲染到页面上就行了。
-
这里的歌单图片，标题等需要使用router-link来包裹，使其能够点击跳转到歌单里面去，并且要传递id参数，来指定跳转的具体页面，图片，标题，播放量等就使用v-for循环渲染musicList，然后使用插值表达式将数据渲染到页面上，具体的代码如下所示：
- 数据渲染完成之后就是样式的问题了，这里的每个歌单的标题需要两行显示，超出的部分省略号显示，图片需要圆角显示，播放量需要使用固定定位显示在图片的左上角，部分css代码如下所示：
