Vue实现歌曲列表

Vue实现歌曲列表的基本方法

使用Vue实现歌曲列表通常涉及数据绑定、组件化和事件处理。以下是一个完整的实现方案：

数据准备 在Vue实例或组件中定义歌曲数据数组：

data() {
  return {
    songs: [
      { id: 1, title: '歌曲1', artist: '歌手1', duration: '3:45' },
      { id: 2, title: '歌曲2', artist: '歌手2', duration: '4:20' },
      { id: 3, title: '歌曲3', artist: '歌手3', duration: '2:55' }
    ],
    currentSong: null
  }
}

模板渲染 使用v-for指令渲染歌曲列表：

<ul class="song-list">
  <li v-for="song in songs" :key="song.id" 
      @click="playSong(song)"
      :class="{ 'active': currentSong && currentSong.id === song.id }">
    <span class="title">{{ song.title }}</span>
    <span class="artist">{{ song.artist }}</span>
    <span class="duration">{{ song.duration }}</span>
  </li>
</ul>

添加交互功能

播放控制 在methods中定义播放方法：

methods: {
  playSong(song) {
    this.currentSong = song
    // 这里可以添加音频播放逻辑
    console.log('正在播放:', song.title)
  }
}

样式优化 添加CSS样式增强视觉效果：

.song-list {
  list-style: none;
  padding: 0;
}
.song-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.song-list li:hover {
  background-color: #f5f5f5;
}
.song-list li.active {
  background-color: #e3f2fd;
  color: #1976d2;
}

高级功能扩展

搜索过滤 添加搜索框和过滤功能：

<input v-model="searchQuery" placeholder="搜索歌曲..." class="search-input">

computed: {
  filteredSongs() {
    return this.songs.filter(song => 
      song.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
      song.artist.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

排序功能 添加排序选项：

data() {
  return {
    sortOptions: [
      { value: 'title', text: '按歌曲名' },
      { value: 'artist', text: '按歌手' },
      { value: 'duration', text: '按时长' }
    ],
    sortBy: 'title'
  }
},
computed: {
  sortedSongs() {
    return [...this.filteredSongs].sort((a, b) => {
      if (this.sortBy === 'duration') {
        return this.convertToSeconds(a.duration) - this.convertToSeconds(b.duration)
      }
      return a[this.sortBy].localeCompare(b[this.sortBy])
    })
  }
}

组件化实现

对于大型应用，可以将歌曲列表拆分为独立组件：

// SongItem.vue
<template>
  <li @click="$emit('play', song)" :class="{ active: isActive }">
    <slot></slot>
  </li>
</template>

<script>
export default {
  props: ['song', 'isActive']
}
</script>

// SongList.vue
<template>
  <ul class="song-list">
    <song-item 
      v-for="song in songs" 
      :key="song.id"
      :song="song"
      :is-active="currentSong && currentSong.id === song.id"
      @play="$emit('play', song)">
      <!-- 插槽内容 -->
    </song-item>
  </ul>
</template>