在 Vue.js 中，动态地绑定 CSS 类和样式是一项常见的需求。Vue 提供了几种不同的方法来实现这一点，包括对象语法、数组语法和组件的作用域插槽。
以下是这些方法的详细说明：
一、Class 绑定
1、对象语法
对象语法允许根据表达式的真值动态地切换类。
<script setup>
import { ref } from 'vue'
const isActive = ref(true);
const hasError = ref(false);
</script>
<template>
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>
在这个例子中，active 类将在 isActive 为 true 时应用，text-danger 类将在 hasError 为 true 时应用。
2、数组语法
数组语法允许你根据数组中的值动态地应用多个类。
<script setup>
import { ref } from 'vue'
const activeClass = ref('active');
const errorClass = ref('');
</script>
<template>
<div :class="[activeClass, errorClass]"></div>
</template>
在这个例子中，activeClass 将始终被应用，而 errorClass 只有在其值非空时才会被应用。
3、字符串语法
字符串语法允许你直接将静态类名绑定到元素上。
<script setup>
import { ref } from 'vue'
const dynamicClass = ref('dynamic-active');
</script>
<template>
<div class="static-class" :class="dynamicClass"></div>
</template>
4、使用计算属性进行 Class 绑定
<script setup>
import { ref,computed } from 'vue'
const isActive = ref(true);
const hasError = ref(false);
// 定义一个计算属性，它返回一个对象
const classObject = computed(() => {
return {
active: isActive.value,
'text-danger': hasError.value
};
});
</script>
<template>
<div :class="classObject"></div>
</template>
在这个例子中，classObject 是一个计算属性，它根据 isActive 和 hasError 的值返回一个对象。这个对象中的键是类名，值是一个布尔表达式，决定了相应的类是否被应用。
解释
-
classObject计算属性返回一个对象，其中包含两个属性：active和'text-danger'。 - 当
isActive为true时，active类将被应用。 - 当
hasError为true时，'text-danger'类将被应用。 - 由于
classObject是一个计算属性，它的值会根据isActive和hasError的变化自动更新，从而实现响应式的类绑定。
这种方法的优点是它使得类绑定的逻辑更加集中和可维护，特别是当你有多个条件需要根据复杂的逻辑来应用不同的类时。通过将这些逻辑封装在计算属性中，你可以保持模板的简洁和清晰。
二、Style 绑定
1、对象语法
对象语法允许根据表达式的真值动态地切换样式。
<script setup>
import { ref } from 'vue'
const activeColor = ref('red');
const fontSize = ref(14);
</script>
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
<p> style </p>
</div>
</template>
在这个例子中，文本颜色将始终是红色，字体大小将根据 fontSize 的值动态变化。
效果如下：
<script setup>
import { ref } from 'vue'
const activeColor = ref('red');
const fontSize = ref(36);
</script>
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
<p> style </p>
</div>
</template>
修改fontSize 字体大小后， 效果如下：
2、数组语法
数组语法允许你根据数组中的值动态地应用多个样式。
<script setup>
import { ref } from 'vue'
const baseStyles = ref({
color: 'blue',
fontSize: '12px'
});
const overridingStyles = ref({
color: ''
});
</script>
<template>
<div :style="[baseStyles, overridingStyles]">
<h1> ces </h1>
</div>
</template>
在这个例子中，baseStyles 将始终被应用，而 overridingStyles 将在其值非空时覆盖 baseStyles 中的样式。
<script setup>
import { ref } from 'vue'
const baseStyles = ref({
color: 'blue',
fontSize: '12px'
});
const overridingStyles = ref({
color: 'red'
});
</script>
<template>
<div :style="[baseStyles, overridingStyles]">
<h1> ces </h1>
</div>
</template>
调整 overridingStyles 为非空值时的效果：
注意事项
- 当使用数组语法时，确保数组中的每个样式对象都返回一个样式对象，而不是一个数组。