vue(active样式切换)

// 情况1

<div href="#!" class="collection-item"

v-for="gameName in gameNames"

@click="selected(gameName)"

:class="{actives: activeName == gameName}">{{gameName}}</div>

</div>

 

 

gameNames: ['白银一', '白银二', '白银三'],

activeName: '白银一'

 

 

 

selected: function(gameName) {

this.activeName = gameName

}

.actives{

    color:#666;

}

// 情况2

<template>
  <div class="test">
    <div class="mb10 activeButton" v-for="(parentItems,parentIndex) in tabs" :key="parentIndex">
      <label class="label-straight mr20 pl10 pr10" >{{parentItems.name}}:</label>
      <button
        v-for="(item, index) in btns"
        @click="changeAtive((parentItems.id+''+ index), parentIndex)"
        :key="parentItems.id+''+index"
        :class="(initActive[parentIndex] === (parentItems.id+''+index))? 'active': ''">
        {{item}}
      </button>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'test',
    data () {
      return {
        tabs: [
          {name: '测试1', id: 100, index: 0},
          {name: '测试22', id: 101, index: 1},
          {name: '测试33', id: 102, index: 2}
        ],
        btns: ['第一个', '第儿个', '第三个'],
        initActive: ['1000', '1011', '1022']
      }
    },
    methods:{
      changeAtive (activeBtn,parentIndex) {
        this.$set(this.initActive, parentIndex, activeBtn)
      }
    }
  }
</script>