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表示一个带有边框和间距的盒子。