Vue动态绑定class

绑定对象

绑定数组

用在组件上

组件内只有一个根元素

组件内有多个元素

class与动态class是可以一起使用的

绑定对象

:class = "{ 类名1: 判断条件1, 类名2: 判断条件2, ... }"

如果类名后面对应的条件成立，则类名就会添加

案例

<template>
  <!-- 这里flag为true,所以存在 "bg" 这个类名 加上本来的类名 "box", 则现在的div的类名为 "box bg" -->
  <div class="box" :class="{ bg: flag }"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const flag = ref(true)
</script>

<style>
.box {
  width: 500px;
  height: 300px;
  margin: 50px auto;
}

.bg {
  background: pink;
}
</style>

当然，我们也可以直接给class绑定一个对象

<template>
  <!-- 这里flag为true,所以存在 "bg" 这个类名 加上本来的类名 "box", 则现在的div的类名为 "box bg" -->
  <div class="box" :class="styleObj"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const flag = ref(true)

const styleObj = ref({ bg: flag.value })
</script>

<style>
.box {
  width: 500px;
  height: 300px;
  margin: 50px auto;
}

.bg {
  background: pink;
}
</style>

也可以绑定一个计算属性

<template>
  <!-- 这里flag为true,所以存在 "bg" 这个类名 加上本来的类名 "box", 则现在的div的类名为 "box bg" -->
  <div class="box" :class="styleObj"></div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const flag = ref(true)

const styleObj = computed(() => ({ bg: flag.value }))
</script>

<style>
.box {
  width: 500px;
  height: 300px;
  margin: 50px auto;
}

.bg {
  background: pink;
}
</style>

绑定数组

也可以使用一个数组来绑定多个 class，数组中我们可以写 三元表达式 对象形式 直接写类名

:class="[ '直接写类名' , { 类名1: 判断条件1, 类名2: 判断条件2, ... } , 类名？条件1：条件2 , ... ]"

<template>
  <!-- 数组中多个类名之间用逗号分隔。可以直接写类名，也可以写三元，还可以写对象形式 -->
  <div class="box" :class="[{ bg: flag }, 'w500', flag ? 'h300': ''  ]"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const flag = ref(true)
</script>

<style>
.box {
  margin: 50px auto;
}

.bg {
  background: pink;
}

.w500 {
  width: 500px;
}

.h300 {
  height: 300px;
}
</style>

用在组件上

组件内只有一个根元素

会直接添加到根元素上

父组件

<template>
  <!-- 因为Son组件内只有一个跟元素，所以类名都会添加到Son组件的根元素上 -->
  <Son :class="['box', { bg: flag }, flag ? 'w500' : '', 'h300']"></Son>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Son from './Son.vue'

const flag = ref(true)
</script>

<style>
.box {
  margin: 50px auto;
}

.bg {
  background: pink;
}

.w500 {
  width: 500px;
}

.h300 {
  height: 300px;
}
</style>

子组件

<template>
  <div>
    子组件
  </div>
</template>

组件内有多个元素

需要指定哪个根元素来接收这个 class。可以通过组件的 $attrs 属性来实现指定：

$attrs会把props没有声明接收的，全部接收过来，起到了一个兜底的作用

父组件

<template>
  <!-- Son组件内有多个跟元素，则就需要Son组件内某个跟组件借助$attrs进行接收使用 -->
  <Son :class="['box', { bg: flag }, flag ? 'w500' : '', 'h300']"></Son>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Son from './AboutView.vue'

const flag = ref(true)
</script>

<style>
.box {
  margin: 50px auto;
}

.bg {
  background: pink;
}

.w500 {
  width: 500px;
}

.h300 {
  height: 300px;
}
</style>

子组件

<template>
  <div :class="$attrs.class">子组件</div>
  <div>多个跟标签 -- {
   
   { $attrs }}</div>
</template>

<script setup lang="ts">
import { useAttrs } from 'vue'

// 可以使用 useAttrs 这个函数，查看没有被 props 接收的数据
const attrs = useAttrs()
console.log(attrs)
</script>

绑定对象

绑定数组

用在组件上

组件内只有一个根元素

组件内有多个元素

猜你喜欢