vue实践之项目积累-----样式绑定（class与style）

在实际应用中，同种元素的不同状态的不同样式这是一个很常见的需求。我们通常用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>