vue中v-bind:class動態添加class

1.html代碼

 <template v-for='item in names'>
     <div id="app" class="selectItem" v-bind:class="{'selected': item.Members}" v-on:click='addSelectedTagForMembers($index)'>{{item.name}}</div>
 </template>

 template中的div拿的 data下names的name，v-bind:class="{'selected': item.Members}"  的意思是  當names下的Members==true時給div的class動態添加selected

2.selectedCSS樣式

.selected{
 background: #33baff;
}

 

3.JavaScript代碼

new Vue({
 el: '#app',
 data: {
 isA: true,
  isB: false,
 names:[
        {name:'張三三',Members:false,Leader:false},
        {name:'毛豆豆',Members:false,Leader:false},
        {name:'淘氣',Members:false,Leader:false},
        {name:'二蛋',Members:false,Leader:false},
        {name:'強子',Members:false,Leader:false},
        {name:'剩下的',Members:false,Leader:false},
        {name:'小時',Members:false,Leader:false},
        {name:'豆豆',Members:false,Leader:false},
        {name:'按時',Members:false,Leader:false},
        {name:'形勢下',Members:false,Leader:false}
        ]
 }
})

4.v-on:click事件代碼

addSelectedTagForMembers:function(index){
    this.names[index].Members=true;
 }