vue网易云歌曲播放

1.引入矢量图标

2.获取真实数据展示

3.设置动态class绑定，当添加class名称，active：true为音乐正在播放，active：false为音乐暂停，唱片的唱臂跟随歌曲的播放暂停同步进行改变

 

4.准备一个变量控制唱片与歌词的切换并使用v-if和v-else进行绑定设置

 

显示唱片：

 

显示歌词：

 

歌曲切换

1.给歌曲切换图标设置点击事件绑定goplay方法

 

 

2.设置goplay方法获取切换之后的歌曲下标，同时进行判断下标小于零即歌曲在第一首时在进行切换则切换到最后一首，而当下标等于歌曲数量长度时即歌曲在最后一首时在进行切换则切换到第一首