VUE动态绑定class的方法
着急使用直接看博客底部,本人常用的两种方法!!! 1.对象语法 < div v-bind: class = " { active: isActive } " > </ div > data : { isActive : true , } 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的值。 结果渲染为: < div class = " active " > </ div > 官方还给了个绑定的数据对象,绑定一个返回对象的计算属性中: < div v-bind: class = " classObject " > </ div > data : { isActive : true , error : null } , computed : { classObject : function ( ) { return { active : this . isActive && ! this . error , 'text-danger' : this . error && this . error . type === 'fatal' } } } 2.数组语法 我们可以把一个数组传给 v-bind:class,以应用一个 class 列表: < div v-bind: class = " [activeClass, errorClass] "