Vue - Class和Style绑定详解

1. 模板部分

<template><div><!-- Class 绑定示例 --><div :class="{ active: isActive, 'text-danger': hasError }">Hello, Vue!</div><!-- Class 绑定数组示例 --><div :class="[activeClass, errorClass]">Class 绑定数组</div><!-- Style 绑定示例 --><div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Style 绑定示例</div><!-- 多个样式对象数组示例 --><div :style="[baseStyles, overridingStyles]" class="box">多个样式对象数组</div></div>
</template>

在模板部分，展示了四种不同的绑定方式。分别是通过对象动态切换Class、通过数组渲染多个Class、通过对象绑定内联样式，以及通过数组渲染多个样式对象。

2. 脚本部分

<script>
export default {data() {return {isActive: true,hasError: false,activeClass: "active",errorClass: "text-danger",activeColor: "red",fontSize: 30,baseStyles: {backgroundColor: "lightblue",borderRadius: "8px"},overridingStyles: {border: "2px solid blue"}};}
};
</script>

在脚本部分，使用了Vue.js的组件机制。通过data函数返回一个包含动态数据的对象，这些数据将被用于Class和Style的绑定。在这里，定义了isActive、hasError等状态，以及一些样式相关的属性。

3. 样式部分

<style scoped>
.active {color: green;font-weight: bold;
}.text-danger {color: red;
}.box {width: 100px;height: 100px;border: 1px solid black;margin: 10px;
}
</style>

最后，在样式部分，定义了一些基本的样式规则，如.active表示文字颜色为绿色且加粗，.text-danger表示文字颜色为红色，.box表示一个带有边框和间距的盒子。