如何使用VueJS突出顯示列表中的項目

Question

我對VueJS非常陌生，我試圖用它來製作播放列表應用程序。製作播放清單的第一部分是相當簡單：

var playlist = []; 
var playlistCurrentlyPlaying = 0; 

// TODO: Highlight currently playing song 
Vue.component('playlist-item', { 
    template: "<li class='playlist-item'>{{ text }}</li>", 
    props: ['text'] 
}); 

var playlistElement = new Vue({ 
    el: '#playlist', 
    data: { 
     playlist: playlist 
    } 
}); 

// Add song to the playlist 
playlist.push({filepath:"url/to/file", artist:"The Band"}) 

以及相應的HTML

：正在使用

<ul id="playlist" > 
    <li v-for="song in playlist" is="playlist-item" :text="song.filepath"> 
    </li> 
</ul> 

的playlistCurrentlyPlaying變量用於其他功能來跟蹤播放列表中的什麼歌的

。我想用Vue突出顯示播放列表中當前正在播放的歌曲。我正在使用Vue2，只是不知道如何做到這一點

Answer 1

我是Vue.JS自己的新手，但你可以不添加另一個屬性給你playlist項目組件，它表明該項目目前正在播放（活性）？

<li v-for="(song, index) in playlist" is="playlist-item" :text="song.filepath" :active="index == playlistCurrentlyPlaying">