//html
<div id="app">
<ul><div>选择你最喜欢的爱好:</div>
<li class="collection-item"
v-for="gameName in gameNames"
:class="{active: activeName == gameName}"
@click="selected(gameName)">{{gameName}}
</li>
</ul>
</div>
//js
new Vue({
el: "#app",
data: {
gameNames: ['看书', '听歌', '游泳', '健身', '看电影','旅游'],
activeName: ''
},
methods: {
selected: function(gameName) {
this.activeName = gameName
}
}
})
//css样式
.active{
color:red;
}
.collection-item{
border:1px solid #dadada;
padding:10px 2px;
98px;
margin-bottom:5px;
text-align:center;
}
在线查看效果
https://jsfiddle.net/fozero/npxo3ryq/1/