Vue实现简单的音乐播放器

Vue实现简单的音乐播放器_第1张图片


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器title>
    <style>
        *{
      
            margin-left: 0px;
            padding-left: 0px;
        }
        ul li{
      
            list-style: none;
            line-height: 30px;
            color:#999999;
        }
        ul li.active{
      
            background-color: indianred;
            color: #FFFFFF;
        }
        audio{
      
            width: 100%;
        }
    style>
head>
<body>
<div id="music">
    
    
  • { {item.id}}.{ { item.author }}-{ { item.name }} li> ul> div> <script src="js/vue.js">script> <script> var musicData = [ { id: 1, name: '遇见', author: '孙燕姿', songSrc: 'static/孙燕姿 - 遇见.mp3' }, { id: 2, name: '斑马,斑马', author: '宋冬野', songSrc: 'static/宋冬野 - 斑马,斑马.mp3' }, { id: 3, name: '夜空中最亮的星', author: '逃跑计划', songSrc: 'static/逃跑计划 - 夜空中最亮的星.mp3' }, { id: 4, name: '匆匆那年', author: '王菲', songSrc: 'static/王菲 - 匆匆那年.mp3' } ]; new Vue({ el: '#music', data() { return { musicData:[], currentIndex:0 } }, methods:{ //点击那首歌播放哪一首 songHandler(i){ this.currentIndex = i; }, //播放下一首 nextHanlder(){ this.currentIndex++; } }, created(){ //赋值变量 this.musicData = musicData } }) script> body> html>
  • 欢迎大家阅读,本人见识有限,写的博客难免有错误或者疏忽的地方,还望各位指点,在此表示感激不尽。文章持续更新中…

    你可能感兴趣的:(Vue.js,vue)