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的新手，但是你不能在播放列表项目组件中添加另一个属性来指示该项目当前是否正在播放（活动）吗？

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

如何使用VueJS突出显示列表中的项目

1 个答案: