vue.js 怎么做插件(Vue.js实现音乐播放器)
类别:编程学习 浏览量:1782
时间:2021-10-24 10:32:24 vue.js 怎么做插件
Vue.js实现音乐播放器本文实例为大家分享了Vue.js实现音乐播放器的具体代码,供大家参考,具体内容如下
目录如下:
运行效果如图所示:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> * { margin: 0; padding: ; } ul { list-style: none; } ul li { margin: 20px; padding: 10px 5px; border-radius: 3px; } ul li.active { background-color: aqua; } #control { width: 100%; height:80px; } .next,.before { width: 100px; height: 80px; background-color: aqua; } h1 { color: red } </style> </head> <body> <li id="app"> <audio :src="currentSrc" controls="controls" autoplay="autoplay" @ended="changEnd"></audio> <h1>不仅仅是代码的搬运工</h1> <ul> <li :class='{active:index === currentIndex}' v-for='(item,index) in musicData' :key="item.id" @click="changeSong(item.songSrc,index)"> <h2>{{item.id }}---歌名:{{item.name}}----{{item.author}}</h2> </li> </ul> <li id="control"> <button class="before" type="button" @click="beforeSong" >上一首</button> <button class="next" type="button" @click="nextSong" >下一首</button> </li> </li> <script type="text/javascript"> const musicData = [{ id: 1, name: '喜欢你', author: '陈洁仪', songSrc: './status/陈洁仪 - 喜欢你.mp3' }, { id: 2, name: '我又想你了', author: '小鹅', songSrc: './status/小鹅 - 我又想你了.mp3' } ]; var app = new Vue({ el: '#app', data: { musicData, currentIndex: 0, currentSrc: './status/小鹅 - 我又想你了.mp3' }, methods: { changeSong (src,index) { this.currentSrc = src; this.currentIndex = index; }, changEnd () { this.currentIndex++; if(this.currentIndex===this.musicData.length){ this.currentIndex = 0; } this.currentSrc = this.musicData[this.currentIndex].songSrc; }, nextSong () { this.currentIndex++; if(this.currentIndex===this.musicData.length){ this.currentIndex = 0; } this.currentSrc = this.musicData[this.currentIndex].songSrc; console.log(this.currentIndex) }, beforeSong () { if(this.currentIndex===0){ this.currentIndex=this.musicData.length; } this.currentIndex--; this.currentSrc = this.musicData[this.currentIndex].songSrc; } } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue切换图片效果(Vue.js实现图片切换功能)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- 会 吃人 的客机 从天堂到地狱只需5分钟,图-104如何做到(会吃人的客机)
- 男人犯的错,为什么要女人来承担(为什么要女人来承担)
- 心理学 四个金蟾,哪个最招财 测你今生的运势有多棒(心理学四个金蟾)
- 吉善缘《聚宝金蟾》金蟾招财摆件 三足全铜蟾蜍客厅店铺开业礼品(吉善缘聚宝金蟾金蟾招财摆件)
- 招财化煞神兽,金蟾变了(招财化煞神兽金蟾变了)
- 26岁杨紫的白素贞遇上24岁鞠婧祎,哪个最美(26岁杨紫的白素贞遇上24岁鞠婧祎)
热门推荐
- 使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
- navicat for mysql连接测试失败(Navicat Premiun远程连接MySQL报错10038解决方案)
- 如何注册asp.net 4.0 到iis
- python实战方法(Python常用特殊方法实例总结)
- mysql统计下个月过生日的人数(Mysql出生日期转换为年龄并分组统计人数的方法示例)
- 图片热点链接的设置
- laravel实现跨域访问(使用laravel和ajax实现整个页面无刷新的操作方法)
- dedecms系统参数设置(织梦dedecms首页调用指定栏目内容的标签详解)
- python自动计算机器人(python实现nao机器人手臂动作控制)
- phpredis存储对象(PHP使用redis位图bitMap 实现签到功能)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9