Vue 音乐播放器：实现上一首、下一首和歌曲名显示

在 Vue 中实现音乐播放并显示歌名，可以按照以下步骤进行：

创建一个 Vue 实例，并在 data 中定义相关的数据，如歌曲列表、当前播放的歌曲索引、当前播放状态、当前歌曲名等。

new Vue({
  el: '#app',
  data: {
    songs: [
      { id: 1, name: '歌曲1', url: 'song1.mp3' },
      { id: 2, name: '歌曲2', url: 'song2.mp3' },
      { id: 3, name: '歌曲3', url: 'song3.mp3' },
    ],
    currentSongIndex: 0,
    isPlaying: false,
    currentSongName: ''
  },
  methods: {
    playSong() {
      // 播放音乐的逻辑
      this.isPlaying = true;
      this.currentSongName = this.songs[this.currentSongIndex].name;
    },
    nextSong() {
      // 下一首歌曲的逻辑
      this.currentSongIndex = (this.currentSongIndex + 1) % this.songs.length;
      this.playSong();
    },
    prevSong() {
      // 上一首歌曲的逻辑
      this.currentSongIndex = (this.currentSongIndex - 1 + this.songs.length) % this.songs.length;
      this.playSong();
    }
  },
  mounted() {
    this.currentSongName = this.songs[this.currentSongIndex].name;
  }
});

在 Vue 模板中展示音乐播放器和歌曲名信息。

<div id='app'>
  <h1>音乐播放器</h1>
  <div>
    <button @click='prevSong'>上一首</button>
    <button @click='playSong'>{{ isPlaying ? '暂停' : '播放' }}</button>
    <button @click='nextSong'>下一首</button>
  </div>
  <p>当前歌曲：{{ currentSongName }}</p>
</div>

通过上面的代码，你可以在 Vue 中实现一个简单的音乐播放器，并在界面上显示当前播放的歌曲名。当点击上一首、下一首和播放按钮时，会触发相应的方法来切换歌曲和播放状态，并更新当前歌曲名的显示。