手把手教你Excel制作动态模糊匹配的下拉菜单(vba下拉框模糊匹配)
884
2022-05-29
一.话不多,先看效果:
视频B站效果演示地址~
https://www.bilibili.com/video/BV12y4y1g71S
这是个单页面音乐播放器,只用到了 html+css 与很基础的vue语法,所以适合初学者,看一看10分钟就会了~
二.详细制作步骤(完整代码在最后):
标签里的vue语法解释(先看后面的js部分再看这里更好理解):
给这个标签 v-model='query’双向绑定数据query,@keyup.enter="searchMusic"绑定键盘回车事件,触发searMusic函数。
{{item.name}}
放内容,写在{{}}里。item相对于变量。
v-for="" 根据 musicList这个数组里元素的数量,动态生成多少个 li 。
@click="playMusic(item.id)点击事件,触发playMusic(item.id)函数,并传参数。
:class="{playing:isPlay},若isPlay值为真,playing这个选择器生效。
歌曲主要调用的是网易云的公开API所得~
new Vue({ el:"#container", data(){ return{ //搜索关键字 query:'', //歌曲列表 musicList:[], //当前歌曲地址 url:'', //海报地址 poster:'./img/timg4.jpg', //判断是否正在播放 isPlay: false, //评论 comment:[] } }, methods:{ searchMusic(){ // 判断搜索框有没有字 if(this.query==''){ //没有自己返回 return; } // 发送请求获得数据 axios({ url:'https://autumnfish.cn/search', method:'get', params:{ keywords:this.query } }).then(res=>{ //把获取数据传给musicList数组,可以通过 console.log(res);查看自己想要的数据 this.musicList = res.data.result.songs; }) }, playMusic(id){ //获得歌曲的url axios({ url:'https://autumnfish.cn/song/url', method:'get', params:{ id:id } }).then(res=>{ // 将当前歌曲地址设置为这个 this.url = res.data.data[0].url; }) //获取歌曲海豹 axios({ url:'https://autumnfish.cn/song/detail', method:'get', params:{ ids:id } }).then(res=>{ // 把图片地址纯存在poster数组 this.poster=res.data.songs[0].al.picUrl }) //获取评论 axios({ url:'https://autumnfish.cn/comment/hot', method:'get', params:{ type:0, id:id } }).then(res=>{ // 把评论的数据存在comment数组,包括头像,网名等等,可以通过 console.log(res);查看自己想要的数据 this.comment=res.data.hotComments }) }, // 歌曲是正在播放触发 play(){ this.isPlay = true; }, // 歌曲是停止触发 pause(){ this.isPlay = false; } } })
三. 完整代码(需要素材与源文件的私信或在评论区留下邮箱,我发你呀):
{{item.user.nickname}}
{{item.content}}