Vue - Class和Style绑定详解

Bertha 。 2024-02-05 20:19 32阅读 0赞

#### 1. 模板部分 ####

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

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

#### 2. 脚本部分 ####

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

#### 3. 样式部分 ####

最后，在样式部分，定义了一些基本的样式规则，如.active表示文字颜色为绿色且加粗，.text-danger表示文字颜色为红色，.box表示一个带有边框和间距的盒子。  
![在这里插入图片描述][b5b626fa47cd4822abf8ca9ef9f7c98d.png]

[b5b626fa47cd4822abf8ca9ef9f7c98d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/1b0d3f34f9b8456090cdc518ddaccd32.png