中對循環的目標的樣式控制

vue.js相信如今不少前端er都在使用，對於這樣一個框架。很方便，可是對於初學來講，若是剛從jq的dom轉換過來操做數據，可能有一點懵逼。如今有這樣兩個需求，看看如何來簡單粗暴的理一理：

一、點擊單個目標增長樣式，其餘的不增長

<ul>
  <li v-for="(v,k) in list" :class="{active:activeBtn==k }" @click="clickBtn(v,k)" :key="k">{{v}}</li>
</ul>

clickBtn(v,k){
this.activeBtn=k
}

則，每次li的時候，li的值都會等於下標，也就是當前的activeBtn==k是成立的，則會加上class

二、點擊多個目標增長class而且再次點擊取消class

數組中push一個標記selected:0 （標記爲0，由於0=false,語義化比較強一點而已）--默認全部都不選中：

以下：

list:[{name:"john",age:10,selected:0},{name:"jack",age:11,selected:0}]

HTML代碼以下：

<ul>
  <li v-for="(v,k) in list" :class="{active:v.selected==1 }" @click="clickBtn(v,k)" :key="k">{{v}}</li>
</ul>

點擊事件以下：

clickBtn(v,k){

v.selected==0?v.selected=1:v.selected=0;

}

事件中判斷，若是點擊的目標selected爲0,則賦值爲1，成爲選中狀態，再次點擊該目標-selected=1，則取消選中狀態

至此，咱們已經完成了開發中兩種最經常使用的在循環列表中利用class來控制樣式的方法

知道你們都比我聰明，畢竟我剛從操做dom轉換到操做數據，還繞了好久