在 Vue 中，class 和 style 绑定是非常实用的功能，它们允许开发者根据数据的状态动态地添加或修改 HTML 元素的 class 属性和 style 属性。
- class 绑定原理
基本原理
Vue 的 class 绑定核心原理是基于数据驱动视图的思想。Vue 会对绑定的表达式进行求值，根据求值结果动态地更新元素的 class 属性。Vue 会监听数据的变化，当数据发生改变时，重新计算绑定的表达式，并更新 DOM 上的 class 属性。
绑定方式及原理分析
对象语法
对象语法允许我们根据条件动态地添加或移除 class。
代码如下：
<template>
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
};
}
};
</script>
数组语法
数组语法可以用来绑定多个 class
<template>
<div :class="[activeClass, errorClass]"></div>
</template>
<script>
export default {
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
};
}
};
</script>
组件上的 class 绑定
代码如下：
<template>
<MyComponent :class="{ active: isActive }"></MyComponent>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
isActive: true
};
}
};
</script>
- style 绑定原理
基本原理
style 绑定同样基于数据驱动视图。Vue 会对绑定的表达式进行求值，将结果转换为合法的 CSS 样式，并更新元素的 style 属性。Vue 会监听数据的变化，当数据改变时，重新计算绑定的表达式并更新 DOM 上的 style 属性。
绑定方式及原理分析
对象语法
对象语法允许我们以 JavaScript 对象的形式绑定 style。
代码如下：
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 16
};
}
};
</script>
数组语法
数组语法可以用来绑定多个样式对象。
代码如下：
<template>
<div :style="[baseStyles, overridingStyles]"></div>
</template>
<script>
export default {
data() {
return {
baseStyles: {
color: 'blue',
fontSize: '14px'
},
overridingStyles: {
fontWeight: 'bold'
}
};
}
};
</script>
