vue实践之项目积累-----样式绑定(class与style)
程序员文章站
2022-05-15 18:41:59
...
在实际应用中,同种元素的不同状态的不同样式这是一个很常见的需求。我们通常用v-bind来处理他们,在vue中,v-bind用于绑定class和style时,表达式结果的类型除了字符串之外,还可以是对象或者数组。这里都是属性,有时会计算(computed)
class
对象:
<div v-bind:class="{ active: isActive }"></div>
当isActive为真时,成立,这里是一个对象的情况下,还可以渲染多个对象
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
在Vue中,class和:class可以同时使用
数组:
<div v-bind:class="[activeClass, errorClass]"></div>
或者:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
内联样式主要使用style绑定
style
:style的语法与CSS十分相似,但他实质上是一个JS对象。通常直接绑定一个对象会让可读性更高也更清晰
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>