绑定class

vue 收藏

 0  32

纵论 2024-02-27 10:27:27

积分：0

你可以在对象中写多个字段来操作多个 class。

此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：

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">

我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：

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

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

我们可以给 :class 绑定一个数组来渲染多个 CSS class：

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

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

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

errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。

然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：

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