如何在vue js中切换多个元素的类

Question

我正在尝试为Vuejs 2.0 中的多个元素切换类，我有以下一组按钮，其类为btn-primary。单击按钮会显示该特定元素的子组。这是我的代码：

<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('investor')">Investor</button>
<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('research')">Research</button>
<button class="btn btn-primary btn-xs" v-on:click.prevent="getTags('company')">Company</button>

这显示了以下元素：

<div v-if="tag.investor">
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - Mutual Funds')">Mutual Fund</button>
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - Insurance')">Insurance</button>
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Investor - FII')">FII</button>
</div>
<div v-if="tag.research">
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Research - Tier I')">Research - Tier I</button>
    <button class="btn btn-primary btn-xs" v-on:click.prevent="selectTags('Research - Tier II')">Research - Tier II</button>
</div>

我在data()中有以下内容：

tag: {
    investor: false,
    research: false,
    company: false,
    others: false,
 },

在methods:

getTags: function (tag) {
    this.tag.investor = this.tag.research = this.tag.company = this.tag.others = false
    if(tag == 'investor')
    {
        this.tag.investor = true
    }
    if(tag == 'research')
    {
        this.tag.research = true
    }
    if(tag == 'company')
    {
        this.tag.company = true
    }
    if(tag == 'others')
    {
        this.tag.others = true
    }
},

我想要一个 btn-warning 类，并在选择任何子元素后删除 btn-primary。任何想法如何实现这一点，我不希望有单独的数据元素和切换类。

Answer 1

我想为您的 Vue 推荐一种数据驱动的方法。考虑这个数据结构：

const tags = {
   Investor:[
     {display:"Mutual Fund", value:"Investor - Mutual Funds"},
     {display:"Insurance", value:"Investor - Insurance"},
     {display:"FII", value:"Investor - FII"},
   ],
   Research:[
     {display:"Research - Tier I", value:"Research - Tier I"},
     {display:"Research - Tier II", value:"Research - Tier II"},
  ]
}

如果您使用它，那么您可以大量清理您的模板并处理您添加到数据结构中的任何其他标签。

<div id="app">
  <button v-for="(obj, key) in tags"
          :key="key"
          @click="currentTag = key"
          class="btn btn-xs btn-primary">
    {{key}}
  </button>

  <div>  
    <button v-for="tag in tags[currentTag]"
            :key="tag"
            class="btn btn-xs"
            :class="tagClass(tag)"
            @click="selectTags(tag.value)">
      {{tag.display}}
    </button>
  </div>
</div>

你的 Vue 看起来也干净了很多。

new Vue({
  el:"#app",
  data:{
    currentTag: null,
    tags,
    selectedTags:[]
  },
  methods:{
    selectTags(tag){
      const index = this.selectedTags.findIndex(t => t == tag)

      if (index >= 0)
        this.selectedTags.splice(index, 1)
      else
        this.selectedTags.push(tag)
    },
    tagClass(tag){
      const isSelected = this.selectedTags.includes(tag.value)

      return {
        'btn-warning': isSelected,
        'btn-primary': !isSelected
      }
    }
  }
})

这是example。

Answer 2

您可以使用v-bind:class 指令。

<button 
  class="btn btn-xs" 
  v-bind:class="{ 'btn-warning': tag.research, 'btn-primary': !tag.research }"
  v-on:click.prevent="selectTags('Research - Tier I')"
>
  Research - Tier I
</button>