Highlight items based on clicked
Dynamic binding styles
<template>
<div id="app">
<div class="collection">
<div class="base"
v-for="gameName in gameNames"
@click="selected(gameName)"
:class="{active: activeName == gameName}">{{gameName}}
</div>
</div>
</div>
</template>
<script>
export default {
name: "select-item",
data() {
return {
gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',
'守望先锋'
],
activeName: null
}
},
methods: {
selected: function (gameName) {
this.activeName = gameName
}
}
}
</script>
<style scoped>
.base {
height: 50px;
border: 1px solid black;
background: lightskyblue;
}
.active {
background: orangered;
}
</style>