Class与Style绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为他们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。v-bind用于class和style时，表达式结果类型除了字符串外还可以是对象或数组。
对象语法
可以给v-bind:class一个对象，以动态地切换class
<div v-bind:class="{ active : isActive }"></div>
//active这个class存在与否将取决于数据属性isActive的Boolean值，可以在对象中传入多个属性来动态切换多个class。v-bind:class指令也可以与普通的class属性共存
<div id="app" class="static" v-bind:class="{ active: isActive, 'text-danger':hasError }">
</div>
var vm = new Vue({
el:"#app",
data:{
isActive:true,
hasError:false
}
})
绑定的数据对象不必内联定义在模板里
<div id="app-1" v-bind:class="classObject"></div>
var vm = new Vue({
el:"#app-1",
data:{
classObject:{
active:true,
"text-danger":false
}
}
})
也可以绑定一个返回对象的计算属性.
<div id="app" v-bind:class="classObject"></div>
var vm = new Vue({
el:"#app",
data:{
isActive:true,
error:null
},
computed:{
classObject:function(){
return {
active:this.isActive && !this.error,
"text-danger":this.error && this.error.type === "fatal"
}
}
}
})
#数组语法
我们可以把一个数组传给v-bind:class 以应用一个class列表
<div id="app-1" v-bind:class="[activeClass, errorClass]"></div>
var vm = new Vue({
el:"#app-1",
data:{
activeClass:"active",
errorClass:"text-danger"
}
})
渲染为
<div class="active text-danger"></div>
如果向根据条件切换列表中的class,可以用三元表达式
<div id="app-1" v-bind:class="[isActive ? activeClass :'' , errorClass]"></div>
这样写将始终添加errorClass 但是只有在isActive 是true时才添加activeClass
不过,当有多个条件class时这样写有些繁琐,所以在数组语法中也可以使用对象语法:
<div v-bind:class="[{active: isActive}, errorClass]"></div>
#用在组件上
当在一个自定义的组件上使用class属性时,这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖
Vue.component('my-component',{
template:'<p class="foo bar"></p>'
})
<my-component class="baz boo"></my-component>
HTML将被渲染为
<p class="foo bar baz boo"></p>
对于带数据绑定class也同样适用
<my-component v-bind:class="{active : isActive}"></my-component>
当isActive为true时 HTML将被渲染为
<p class="foo bar active"></p>
绑定内联样式
v-bind:style 的对象语法看着非常像css，但其实就是一个JavaScript对象
<div id="app" v-bind:style="{color:activeColor， fontSize:fontSize +'px'}"></div>
var vm = new Vue({
el:"#app",
data:{
activeColor:'red',
fontSize:30
}
})
直接绑定到一个样式通常更好
<div id="app-1" v-bind:style="styleObject"></div>
var vm = new Vue({
el:"#app-1",
data:{
styleObject:{
color:"red",
fontSize:"13px"
}
}
})
网友评论