實現動態效果：底下音樂播放的什麼圖片就對應顯示該歌單的圖片

store/index.js

<div class="left">
           <img :src="playlist[playCurrentIndex].al.picUrl" alt="">
           <div class="content">{{ playlist[playCurrentIndex].al.name }}</div>
           <div class="tips">橫劃劃切換上下手</div>
       </div>
 

computed:{
           ...mapState(['playlist','playCurrentIndex'])   // 獲取stroe的state的資料
      }

audio播放音樂 頁面播放音樂

playController.vue

<!--
autoplay 自動播放
paused 當前歌曲暫停狀態
play() 播放當前歌曲
pause() 暫停歌曲
-->
       <audio       :src="`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`"></audio>
​
​
​
 

播放按鈕如何只顯示一個

playController.vue

 <svg v-if="paused" class="icon" aria-hidden="true">  <!--阿里巴巴向量圖示-->
               <use xlink:href="#icon-bofang1"></use><!--阿里巴巴向量圖示-->
           </svg>
           <svg v-else class="icon" aria-hidden="true">  <!--阿里巴巴向量圖示-->
               <use xlink:href="#icon-iconstop"></use><!--阿里巴巴向量圖示-->
           </svg>
​
 

定義一個布林值