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;
 }