使用Vue.js实现列表选中效果(高亮效果)
Demo 使用Vue.js实现javascriptnew Vue({el: "#app",data: {gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄','守望先锋'],activeName: ''},methods: {selected: fu...
·
Demo
使用Vue.js实现
javascript
new Vue({
el: "#app",
data: {
gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',
'守望先锋'
],
activeName: ''
},
methods: {
selected: function(gameName) {
this.activeName = gameName
}
}
})
html
<div id="app">
<div class="collection">
<a href="#!" class="collection-item"
v-for="gameName in gameNames"
@click="selected(gameName)"
:class="{active: activeName == gameName}">{{gameName}}</a>
</div>
</div>
css
添加.active 设置高亮的样式即可实现
更多推荐
已为社区贡献4条内容
所有评论(0)