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

【问题标题】：How to use VueJS to highlight an item in a list如何使用 VueJS 突出显示列表中的项目
【发布时间】：2017-01-08 16:44:06
【问题描述】：

我对 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，但无法弄清楚如何做到这一点

【问题讨论】：

标签： javascript vuejs2 vue.js

【解决方案1】：

我自己是 Vue.JS 的新手，但你能不能向你的 playlist-item 组件添加另一个属性来指示该项目当前是否正在播放（活动）？

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

【讨论】：