版本一

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>案例:音乐播放器</title>
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  15.         ul {
  16.             list-style: none;
  17.         }
  19.         ul li {
  20.             margin: 20px 20px;
  21.             padding: 10px 5px;
  22.             border-radius: 3px;
  23.         }
  25.         ul li.active {
  26.             background-color: #D2E2F3;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <div id='app'>
  33.         <audio :src="currentSrc" controls autoplay @ended='handleEnded'></audio>
  34.         <ul>
  35.             <li :class='{active:index===currentIndex}' v-for='(item,index) in musicData' :key='item.id'
  36.                 @click='handleClick(item.songSrc,index)'>
  37.                 <h2>{{item.id}}-歌名：{{item.name}}</h2>
  38.                 <p>{{item.author}}</p>
  39.             </li>
  40.         </ul>
  41.         <button @click='handleNext'>下一首</button>
  42.     </div>
  44.     <script src="./vue.js"></script>
  45.     <script>
  46.         const musicData = [{
  47.                 id: 1,
  48.                 name: '于荣光 - 少林英雄',
  49.                 author: '于荣光',
  50.                 songSrc: './static/于荣光 - 少林英雄.mp3'
  51.             },
  52.             {
  53.                 id: 2,
  54.                 name: 'Joel Adams - Please Dont Go',
  55.                 author: 'Joel Adams',
  56.                 songSrc: './static/Joel Adams - Please Dont Go.mp3'
  57.             },
  58.             {
  59.                 id: 3,
  60.                 name: 'MKJ - Time',
  61.                 author: 'MKJ',
  62.                 songSrc: './static/MKJ - Time.mp3'
  63.             },
  64.             {
  65.                 id: 4,
  66.                 name: 'Russ - Psycho (Pt. 2)',
  67.                 author: 'Russ',
  68.                 songSrc: './static/Russ - Psycho (Pt. 2).mp3'
  69.             }
  70.         ];
  72.         new Vue({
  73.             el: '#app',
  74.             data: {
  75.                 musicData,
  76.                 currentSrc: './static/于荣光 - 少林英雄.mp3',
  77.                 currentIndex: 0
  78.             },
  79.             methods: {
  80.                 handleClick(src, index) {
  81.                     this.currentSrc = src;
  82.                     this.currentIndex = index;
  83.                 },
  84.                 handleEnded() {
  85.                     // // 下一首的播放
  86.                     // this.currentIndex++;
  87.                     // this.currentSrc = this.musicData[this.currentIndex].songSrc;
  88.                     this.handleNext();
  89.                 },
  90.                 handleNext() {
  91.                     this.currentIndex++;
  92.                     if (this.currentIndex === this.musicData.length) {
  93.                         this.currentIndex = 0;
  94.                     }
  95.                     this.currentSrc = this.musicData[this.currentIndex].songSrc
  96.                 }
  97.             }
  98.         })
  99.     </script>
  101. </body>
  103. </html>

版本二

计算属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>案例:音乐播放器</title>
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  15.         ul {
  16.             list-style: none;
  17.         }
  19.         ul li {
  20.             margin: 20px 20px;
  21.             padding: 10px 5px;
  22.             border-radius: 3px;
  23.         }
  25.         ul li.active {
  26.             background-color: #D2E2F3;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <div id='app'>
  33.         <audio :src="getCurrentSongSrc" controls autoplay @ended='handleEnded'></audio>
  34.         <ul>
  35.             <li :class='{active:index===currentIndex}' v-for='(item,index) in musicData' :key='item.id'
  36.                 @click='handleClick(index)'>
  37.                 <h2>{{item.id}}-歌名：{{item.name}}</h2>
  38.                 <p>{{item.author}}</p>
  39.             </li>
  40.         </ul>
  41.         <button @click='handleNext'>下一首</button>
  42.     </div>
  44.     <script src="./vue.js"></script>
  45.     <script>
  46.         const musicData = [{
  47.                 id: 1,
  48.                 name: '于荣光 - 少林英雄',
  49.                 author: '于荣光',
  50.                 songSrc: './static/于荣光 - 少林英雄.mp3'
  51.             },
  52.             {
  53.                 id: 2,
  54.                 name: 'Joel Adams - Please Dont Go',
  55.                 author: 'Joel Adams',
  56.                 songSrc: './static/Joel Adams - Please Dont Go.mp3'
  57.             },
  58.             {
  59.                 id: 3,
  60.                 name: 'MKJ - Time',
  61.                 author: 'MKJ',
  62.                 songSrc: './static/MKJ - Time.mp3'
  63.             },
  64.             {
  65.                 id: 4,
  66.                 name: 'Russ - Psycho (Pt. 2)',
  67.                 author: 'Russ',
  68.                 songSrc: './static/Russ - Psycho (Pt. 2).mp3'
  69.             }
  70.         ];
  72.         new Vue({
  73.             el: '#app',
  74.             data: {
  75.                 musicData,
  76.                 currentIndex: 0
  77.             },
  78.             computed:{
  79.                 getCurrentSongSrc(){
  80.                     return this.musicData[this.currentIndex].songSrc;
  81.                 }
  82.             },
  83.             methods: {
  84.                 handleClick(index) {
  85.                     this.currentIndex = index;
  86.                 },
  87.                 handleEnded() {
  88.                     this.handleNext();
  89.                 },
  90.                 handleNext() {
  91.                     this.currentIndex++;
  92.                     if (this.currentIndex === this.musicData.length) {
  93.                         this.currentIndex = 0;
  94.                     }
  95.                 }
  96.             }
  97.         })
  98.     </script>
  99.     <!-- 18511803134 小马哥 -->
  100.     <!-- vue组件 -->
  101.     <!-- ajax  axios  ajax库 -->
  102. </body>
  104. </html>