手把手教你10分钟做一个音乐播放器

一.话不多，先看效果：

视频B站效果演示地址~

大佬勿入，大佬勿入，大佬勿入）这是个单页面音乐播放器，只用到了 html+css 与很基础的vue语法，所以适合初学者，看一看10分钟就会了~

这个思路是借鉴黑马的~

二.详细制作步骤（完整代码在最后）：

1.第一步当然是定义标签，对于每一个标签的作用注释都写得清清楚楚啦~：

标签里的vue语法解释（先看后面的js部分再看这里更好理解）：

给这个标签 v-model=’query’双向绑定数据query，@keyup.enter=”searchMusic”绑定键盘回车事件，触发searMusic函数。

放内容，写在{{}}里。item相对于变量。

v-for=”” 根据 musicList这个数组里元素的数量，动态生成多少个 li 。

@click=”playMusic(item.id)点击事件，触发playMusic(item.id)函数，并传参数。

:class=”{playing:isPlay}，若isPlay值为真，playing这个选择器生效。

:src=”poster”地址的值为自己定义的变量poster。

后面都是相似的了，以此类推~

2.定义css部分，对一些不常见的属性都会解释~：

1.整体区域：

border-radius: 10px; 角弧度
overflow: hidden;溢出隐藏

2.头部区域：