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

我试图在

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>

在

方法中

：

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

。任何关于如何实现这一点的想法，我都不希望有单独的数据元素和切换类。

您可以使用

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>

研究-第一级

您可以使用

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>

研究-第一级

我想为您的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推荐一种数据驱动的方法。考虑这个数据结构：

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>

---

这是一个。

我知道我使用了

v-bind:class

，但是我有更多的元素，这些元素将是重复的，并且很难管理，因为所有元素类都将被切换。比如假设

研究第二层

元素会发生什么，或者如果我有

研究第三层，第四层

元素我知道我使用了

v-bind:class

，但是我有更多的元素，这些元素会重复并且很难管理，因为所有的元素类都会被切换。比如假设

研究第二层

元素会发生什么，或者如果我有

研究第三层，第四层

元素呢？谢谢你的回答，它工作得很好。最后一个疑问是，如果我只想选择一个端点元素呢。只是为了知识。@NitishKumar当你说“一端元素”是什么意思？你的意思是选择一个标签吗？每个类别一个标签？任何类别仅一个标签。我的意思是，我希望最终或选定的标记是一个值，而不是多个值的数组。@NitishKumar类似于。是的，这很完美。谢谢你的更新和帮助。谢谢你的回答，它工作得很好。最后一个疑问是，如果我只想选择一个端点元素呢。只是为了知识。@NitishKumar当你说“一端元素”是什么意思？你的意思是选择一个标签吗？每个类别一个标签？任何类别仅一个标签。我的意思是，我希望最终或选定的标记是一个值，而不是多个值的数组。@NitishKumar类似于。是的，这很完美。谢谢你的更新和帮助。干杯