Vue 样式绑定

数据驱动的样式是 Vue 一个非常强大的功能。我们可以使用 v-bind 指令（通常简写为 :）来动态地操作元素的 class 和内联 style。

绑定 HTML Class

我们可以给 :class 传递一个对象，以动态地切换 class。

对象语法

<script setup>
import { ref, reactive } from 'vue'

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

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

<template>
  <!-- 当 isActive 为真时，'active' class 会被应用 -->
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>

  <!-- 也可以绑定到一个 data 对象 -->
  <div :class="classObject"></div>

  <!-- 还可以与普通的 class 属性共存 -->
  <div class="static" :class="{ active: isActive }"></div>
</template>

数组语法

我们也可以把一个数组传给 :class，以应用一个 class 列表：

<script setup>
import { ref } from 'vue'

const activeClass = ref('active')
const errorClass = ref('text-danger')
</script>

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

  <!-- 也可以在数组中使用三元表达式 -->
  <div :class="[isActive ? activeClass : '', errorClass]"></div>

  <!-- 在数组中嵌套对象 -->
  <div :class="[{ active: isActive }, errorClass]"></div>
</template>

绑定内联样式

我们可以使用 :style 来绑定内联 CSS 样式。

对象语法

:style 的对象语法十分直观——它看起来几乎就是 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 的写法。

<script setup>
import { ref } from 'vue'

const activeColor = ref('red')
const fontSize = ref(30)
</script>

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

  <!-- 也可以直接绑定到一个样式对象 -->
  <div :style="styleObject"></div>
</template>

<script>
export default {
  data() {
    return {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
  }
}
</script>

数组语法

我们还可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后应用到元素上。

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

自动添加前缀

当你在 :style 中使用了需要浏览器引擎前缀的 CSS property 时，例如 transform，Vue 会自动侦测并添加相应的前缀。Vue 在运行时检查支持的 property，如果当前浏览器不支持某个 property，Vue 会测试各种前缀的变体。例如，flex 会被自动尝试添加 -webkit-flex 和 -ms-flex 等前缀。