Vue3 学习笔记（八）Vue3 语法-Class 与 Style绑定详解

在这里插入图片描述

在 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 为非空值时的效果：

在这里插入图片描述