实现动态效果

实现动态效果：底下音乐播放的什么图片就对应显示该歌单的图片

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>
​

定义一个布尔值