类与样式绑定

Class与Style绑定

Vue专门为class和style的v-bind用法提供了特殊的功能增强，除字符串外，表达式的值也可以是对象或数组

绑定HTML class

可以给 ：class(v-bind:class缩写)传递一个对象来动态切换class

<div :class="{ active: isActive }"></div>

这里是一个布尔值绑定，active是否存在取决于isActive的真假值

可以在对象中写多个字段来操作多个class，此外：class指令也可和一般的class属性共存

如下例：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

配合以下模板

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

渲染的结果为：

<div class="static active"></div>

当isActive或者hasError改变时，class列表会随之更新

绑定一个对象：

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

<div :class="classObject"></div>

绑定一个返回对象的计算属性

这是一个常用的技巧

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="classObject"></div>

绑定数组

可以给:class绑定一个数组来渲染对个CSS class

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

<div :class="[activeClass, errorClass]"></div>

如果想有条件地渲染某个class， 可以使用三元表达式

<div :class="[isActive ? activeClass : '', errorClass]"></div>

当然，当有多个依赖条件时class会有些冗长，因此也可以在数组中嵌套对象

<div :class="[{ active: isActive }, errorClass]"></div>

 

绑定内联样式

：style支持绑定js对象值，对应的是HTML的style属性

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

推荐使用上述 camelCase驼峰命名法，当然也支持下述kebab-cased短横线形式

<div :style="{ 'font-size': fontSize + 'px' }"></div>

直接绑定一个对象

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

<div :style="styleObject"></div>

同样当央视对象需要复杂的逻辑，可以使用返回样式对象的计算属性

绑定数组

可以给：style绑定一个包含多个样式对象的数组

<div :style="[baseStyles, overridingStyles]"></div>