绑定 HTML class

绑定对象

示例：

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

模板中语法表示 active 是否存在取决于数据属性 isActive 的真假值。我们也可以用多个字段来操作多个 class，当然也可以直接绑定一个对象。

示例：

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

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

绑定数组

:class 绑定一个数组来渲染多个 CSS class

示例：

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

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

使用三元表达式示例：

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

在组件上使用

只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上并与该元素上已有的 class 合并。

示例：

<!-- 子组件模板 -->
<p class="foo bar">Hi!</p>

<!-- 在使用组件时 -->
<MyComponent class="baz boo" />

Class 的绑定也是同样的：

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

组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs 属性来指定接收的元素。

示例：

<!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

绑定内联样式

绑定对象

示例：

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

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

直接绑定一个样式对象。

示例：

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

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

绑定数组

这里数组元素是样式对象。

示例：

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