绑定布尔值

可以通过一个布尔值变量来动态决定一个标签中的类名是否存在：

<div class=“first” :class="{ active: isActive }"></div>
let isActive = ref(true)
渲染为-->
<div class="first active"></div>

绑定对象、计算属性

也可以传一个对象（或者是计算属性），其中为 true 的部分会被渲染到当前的标签上去。

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

绑定数组

以数组的形式传参，其中的 string 属性会作为类名渲染。

const activeClass = ref('active')
const errorClass = ref('text-danger')
<div :class="[activeClass, errorClass]"></div>

类的条件渲染

使用三元运算符：

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

嵌套对象：

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

如果 isActive 的值为真，那么 activeClass 的值将作为类名被渲染。这里使用 [] 是 JS 的对象字面量的属性名，其值由相应变量的值决定。

组件上 class 的渲染

在父组件上使用子组件的标签，可以在其中增加新的类名，最终的子组件渲染结果会合并在父组件上添加的类名。

绑定内联样式

可以在标签上通过 style 状态直接写 CSS，具体的值可以绑定变量、表达式，当然最好绑定一个样式对象或者对应的计算属性

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})
<div :style="styleObject"></div>

兼容性

自动前缀 如果当前 CSS 属性值不被支持，框架会尝试加前缀以找到支持的属性名称。 样式多值

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

浏览器会选择最后一个被支持的值，在这里就是 flex。