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