如何在vue中切換多個元素的類js

我試圖在Vuejs 2.0中切換多個元素的類，我有以下一組按鈕，它們的類別爲btn-primary。點擊一個按鈕將顯示該特定元素的子組。這是我的代碼：如何在vue中切換多個元素的類js

<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一旦任何子元素被選中。任何想法如何實現這一點，我不想擁有單獨的數據元素和切換類。

來源

2017-05-20 Nitish Kumar

我想爲您的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。

來源

2017-05-20 15:40:36 Bert

嗨，謝謝你的回答，它的工作是完美的。最後一個疑問是，如果我只想選擇一個末端元素，該怎麼辦？只是爲了知識。 –

@NitishKumar當你說「一端元素」時，你是什麼意思？你的意思是選擇一個標籤？每個類別一個標籤？ – Bert

只有一個標籤來自任何類別。我的意思是我希望final或selectedTag是一個值而不是多個值的數組。 –

您可以使用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>

來源

2017-05-20 15:20:42

我知道我使用'v-bind：class'，但我有更多的元素，這將是重複的，非常難以管理，因爲所有的元素類將被切換。就像假設'Research Tier II元素會發生什麼事情，或者如果我有'Research Tier III，IV'元素 –

如何在vue中切換多個元素的類js

回答

相關問題