Vue 基础面试题, Vue 中 :class 和 :style 有几种表示方式?
Vue 基础面试题, Vue 中 :class 和 :style 有几种表示方式?
QA
Step 1
Q:: Vue 中 :class 有几种表示方式？
A:: Vue 中的 :class 有三种主要的表示方式：字符串语法、对象语法、数组语法。
1. 字符串语法：可以直接将多个类名用空格隔开，如 :class="'class1 class2'"。
2. 对象语法：可以使用对象来动态绑定类名，类名作为键，布尔值作为值，如 :class="{ active: isActive, 'text-danger': hasError }"。
3. 数组语法：可以使用数组来动态绑定多个类，如 :class="[{ active: isActive }, 'class1', 'class2']"。
Step 2
Q:: Vue 中 :style 有几种表示方式？
A:: Vue 中的 :style 主要有两种表示方式：对象语法和数组语法。
1. 对象语法：使用对象来绑定内联样式，其中 CSS 属性名为键，属性值为值，如 :style="{ color: activeColor, fontSize: fontSize + 'px' }"。
2. 数组语法：使用数组来绑定多个内联样式对象，如 :style="[{ color: activeColor, fontSize: fontSize + 'px' }, { backgroundColor: 'red' }]"。
Step 3
Q:: 为什么要使用对象语法来绑定 :class 或 :style？
A:: 对象语法允许开发者根据条件动态地应用样式或类，这对于需要根据应用状态改变界面展示的场景非常有用。例如，当用户的操作或数据状态改变时，使用对象语法可以方便地切换不同的样式或类，而不需要手动添加或移除 DOM 元素的类名或样式。
Step 4
Q:: 如何在 Vue 中同时使用多个 :class 和 :style？
A:: 在 Vue 中，多个 :class 和 :style 可以组合使用。你可以直接在模板中添加多个绑定，如 <div :class="[{ active: isActive }, 'class1', class2]" :style="[{ color: activeColor }, { fontSize: fontSize + 'px' }]">。Vue 会自动合并这些绑定，最终生成的 class 和 style 是所有绑定的合集。