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