vue.js - Vue中如何动态绑定CSS

问题描述

问 题

学习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。请各位高人指点。          

解决方案

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

这篇关于vue.js - Vue中如何动态绑定CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！