<body>
<div id="box1">
<div v-bind:class="{ 'active': isActive， 'error': isError}"></div>
<!-- 类名active依赖于数据isActive -->
</div>
<div id="box2">
<div v-bind:class="classes"></div>
</div>
<div id="box3">
<div v-bind:class="[activeCls,errorCls]"></div>
<!-- <div v-bind:class="[isActive ? activeCls : '' ,errorCls]"></div>
<div v-bind:class="[{isActive ? activeCls : '' },errorCls]"></div> -->
<!-- 这几种写法是一样的 -->
</div>
<div id="toggleBox" v-bind:class = "classes" :style="styles">
</div>
</body>
<script>
//v-bind指令
//常见的需求有对元素的样式名称与内联样式style的动态绑定
var app = new Vue({
el:"#box1",
data:{
isActive:true,
isError:false
}
});
var app2 = new Vue({
el:"#box2",
data:{
isActive:true,
error:null
},
computed: {
classes:function(){
return {
active:this.isActive && !this.error,//与，当isActive为true且没有错误时才添加该类名
'text-fail':this.error && this.error.type === 'fail'//当报错且错误类型为fail时启用
}
}
},
});
var toggle = new Vue({
el:"#toggleBox",
data:{
size:'large',
disabled:true,
styles:{
color:"red",
fontSize:"15px",//15 + 'px'
backgroundColor:white
}
},
computed: {
classes:function(){
return [
'btn',{
['btn-' + this.size]: this.size !== '',//当size不为空值时，相当于btn-large:true，即会应用btn-large样式
['btn-disabled']: this.disabled
// 在写复用的组件时特别快乐，如ui-header-menu-cell...
}
]
}
},
});
</script>