Vue.js学习系列（三十二）-- Vue.js样式绑定（三）

1.3绑定返回对象的计算属性

.active {

width: 100px;

height: 100px;

border: 1px solid red;

background: green

}

.content{

font-size: 14px;

color: red;

}

我是div

new Vue({

el:"#app",

data:{

isActive:true,

error:null

},

computed:{

classObj:function () {

return{

active: this.isActive && !this.error,

'content': this.error && this.error.type === 'fatal',

}

}

}

})

运行结果为：

有运行结果可以看到，div只显示的active类的样式，没有显示content类的样式。是因为在计算属性computed中我们设置了'content': this.error && this.error.type === 'fatal',。这句话表示content类出现错误。所以就不会显示在div上，

此时div的类为