Vue动态绑定class

目录

绑定对象

绑定数组

用在组件上

组件内只有一个根元素

组件内有多个元素

---

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

绑定对象

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

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

案例

 
<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绑定一个对象

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

也可以绑定一个计算属性

 
<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 , ... ]"

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

用在组件上

组件内只有一个根元素

会直接添加到根元素上

父组件

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

子组件

组件内有多个元素

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

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

父组件

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

子组件

 
<script setup lang="ts">
import { useAttrs } from 'vue'
 
// 可以使用 useAttrs 这个函数，查看没有被 props 接收的数据
const attrs = useAttrs()
console.log(attrs)
script>