vue 简单选项卡组件

高亮根据点击的条目

动态绑定样式

<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>