Class 与 Style 绑定

绑定 HTML class

• 1、绑定对象
• 2、绑定数组

• 绑定对象

<div :class="{ active: isActive }"></div>
const isActive = ref(true)
const hasError = ref(false)

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

• 也可以直接绑定一个对象

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

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

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

const isActive = ref(true)
const error = ref(null)

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

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

• 绑定数组

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>

• 在组件上使用

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

* 在使用时添加一些 class：
<!-- 在使用组件时 -->
<MyComponent class="baz boo" />

* 渲染出的 HTML 为：
<p class="foo bar baz boo">Hi!</p>