class和style绑定,使用v-bind处理,并在v-bind上对表达式的结果类型进行了扩展,除了字符串之外还可以是对象或数组。
一、class绑定
1、对象
(1)v-bind的class可以与普通的class属性共存
(2)v-bind的class可以将对象写入到class中
(3)v-bind的class可以将对象写入到data中,并在class中进行调用
(4)返回对象的计算属性
(1)(2)
<div class="static" v-bind:class="{ active:isActive,'text-danger':hasError}"></div>
如下的data:
data:{
isActive:true,
hasError:false
}
渲染为:
<div class="static active"></div>
(3)
<div v-bind:class="classObject"></div>
data:{
classObject:{
active:true,
'text-danger':false
}
}
(4)
<div v-bind:class="classObject"></div>
data:{
isActive:true,
error:null
},
computed:{
classObject:fucntion(){
return{
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type==='fatal'
}
}
}
2、数组语法
<div v-bind:class="[activeClass,errorClass]">
data:{
activeClass:'active',
errorClass='text-danger'
}
渲染为:
<div class="active text-danger"></div>
也可以根据条件切换列表中的class,可以使用三元表达式。
<div v-bind:class="[isActive?activeClass:'',errorClass]"></div>
此例始终添加errorClass但是只有在isActive为true时才添加activeClass。
也可以在数组中使用对象语法:
<div v-bind:class="[{active:isActive},errorClass]"></div>
3、用在组件上
在组件上使用class属性,不会被实例所覆盖。
Vue.component('my-component',{
template:'<p class="foo bar">Hi</p>'
})
在使用时添加class:
<my-component class="bat boo"></my-component>
html被最终渲染为:
<p class="foo bar bag boo">Hi</p>
同样也适用于v-bind形式绑定的class:
<my-component v-bind:class="{active:idActive}"></my-component>
当isActive为true时,html将被渲染为:
<p class="foo bar active">Hi</p>
二、绑定内联样式
1、对象语法
和css类似,一般采用驼峰式命名:
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div>
data:{
activeColor:'red',
font-size:30
}
绑定到一个样式对象上:
<div v-bind:style="styleObject"></div>
data:{
styleObject:{
color:'red',
font-size:'13px'
}
}
2、数组语法
v-bind:style
的数组语法可以将多个样式对象应用到一个元素上:
<div v-bind:style="[baseStyle,overringStyles]"></div>
3、自动添加前缀
当v-bind:style使用需要特定前缀的css属性时,如transform,vue.js会自动侦测并添加相应的前缀。
4、多重值
从 2.3 开始可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值:
<div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">