Vue中如何动态绑定CSS

Question

学习VUE2.0，想尝试做个在表格中，选中不同的列，将该列设置一个CSS。但是不成功。请赐教~~非常感谢！
先上代码
html代码

<div class="row">
         <table class="table table-bordered">
             <thead>
                 <tr>
                     <th>操作</th>
                     <th>ID</th>
                     <th>Name</th>
                     <th>Email</th>
                 </tr>
             </thead>
             <tbody>
                 <tr v-for="(list,index) in lists" :class="isActive[index]">
                     <td><input type="checkbox" @change="Checked(index)"></td>
                     <td >{{list.id}}</td>
                     <td>{{list.name}}</td>
                     <td>{{list.email}}</td>
                 </tr>
             </tbody>
         </table>
      </div> 

js代码

let listTemplate={
    'list|1-10':[{
        'id|+1':1,
        name:'@NAME',
        email:'@EMAIL'
    }]
};

Mock.mock(/\.json/,listTemplate);
let listDb=Mock.mock(listTemplate);

let vm=new Vue({
    el:'#app',
    data:{
       lists:listDb.list,
       isActive:new Array(listDb.list.length)
    },
    methods:{
        Checked:function(index){
            this.isActive[index]='active';
        }
    }
});  
console的isActive看起来是正常的：
[3: "active", __ob__: Observer]
但是并不会应用到CSS。请各位高人指点。          

Answer 1

因为通过this.isActive[index]='active';来更改数组，vue是检测不到数组变动的

Answer 2

按你的代码,应该这样绑指定class,官网有说明class的

:class="{active:isActive[index]=='active'}"

忽略上面的吧,我仔细看了下官网class那段,是可以绑个字符串的,只是扩展了对象和数组

还是楼上说的对,vue检测不到数字的变化,要用到set方法

Checked:function(index){
    this.$set(this.isActive,index,'active');
}

Answer 3

isActive 是一个新数组，而在vue组件渲染的时候isActive中是没有index，index没有getter/setter。所以在方法Checked中更改数组新属性index的值调不到setter方法，也不会通知watcher重新计算将新值渲染在组件上。