7. Class 与 Style 绑定

本节目标：学会用 :class 和 :style 动态控制元素的 class 和样式，掌握对象和数组两种语法。

操作元素的 class 和内联样式是常见需求。class 和 style 都是属性，可以用 v-bind 绑定字符串。但拼字符串很烦，Vue 为此做了专门增强——表达式可以求值成对象或数组。

Class 绑定

传对象给 :class，动态切换 class：

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

active 这个 class 是否存在，取决于 isActive 是否为 truthy。

可以同时切换多个 class，还能和普通的 class 共存：

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

const isActive = ref(true)
const hasError = ref(false)

渲染结果：

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

hasError 变成 true 后变成 "static active text-danger"。

对象不一定要内联：

const classObject = reactive({
  active: true,
  'text-danger': false
})

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

也可以绑定一个返回对象的计算属性——这是很常用的模式：

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

传数组给 :class，应用一组 class：

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

const activeClass = ref('active')
const errorClass = ref('text-danger')

渲染成：

<div class="active text-danger"></div>

要条件切换数组里的 class，用三元表达式：

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

多个条件可以套对象语法：

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

:style 绑定对象，对应元素的 style 属性：

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

const activeColor = ref('red')
const fontSize = ref(30)

推荐用 camelCase 键名，但 kebab-case 也行（加引号）：

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

直接绑定样式对象，模板更干净：

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

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

:style 也能和普通 style 属性共存：

<h1 style="color: red" :style="'font-size: 1em'">hello</h1>

渲染成：

<h1 style="color: red; font-size: 1em;">hello</h1>

:style 可以绑定数组，多个样式对象会合并应用到同一元素：

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

用需要浏览器前缀的 CSS 属性时，Vue 会自动加前缀。运行时检测当前浏览器支持哪个版本，不支持的试各种前缀变体。

可以给一个样式属性提供数组，只渲染浏览器支持的最后一个值：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

支持不带前缀的浏览器就渲染 display: flex。