vue中class 与 Style 绑定

在 Vue.js 中，你可以使用 class 和 style 绑定来动态地添加或修改元素的样式。这两种方式在创建响应式 UI 时非常有用。

class 绑定
在 Vue 中，你可以使用对象语法或数组语法来动态地绑定 class。

对象语法

通过对象的语法，你可以绑定一个或多个 class，每个 class 的名称对应一个对象属性，属性的值是一个布尔值。如果值为 true，则添加对应的 class；如果值为 false，则不添加。

vue
<template>  
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isActive: true,  
      hasError: false  
    };  
  }  
};  
</script>
在这个例子中，如果 isActive 为 true，则添加 active class；如果 hasError 为 true，则添加 text-danger class。

数组语法

通过数组语法，你可以绑定一个 class 列表，列表中的每个元素都是一个字符串或对象。

vue
<template>  
  <div :class="[activeClass, errorClass]"></div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      activeClass: 'active',  
      errorClass: 'text-danger'  
    };  
  }  
};  
</script>
在这个例子中，activeClass 和 errorClass 的值将作为 class 添加到 <div> 元素上。

style 绑定
与 class 绑定类似，你也可以使用对象语法或数组语法来动态地绑定 style。

对象语法

通过对象的语法，你可以绑定一个或多个样式属性，每个属性的名称对应一个对象属性，属性的值是一个字符串或数字。

vue
<template>  
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      activeColor: 'red',  
      fontSize: 30  
    };  
  }  
};  
</script>
在这个例子中，文本颜色设置为 activeColor 的值（'red'），字体大小设置为 fontSize 的值（30px）。

数组语法

通过数组语法，你可以绑定多个样式对象，它们将合并到一个样式对象中。

vue
<template>  
  <div :style="[baseStyles, overridingStyles]"></div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      baseStyles: {  
        color: 'blue',  
        fontSize: '20px'  
      },  
      overridingStyles: {  
        fontSize: '30px'  
      }  
    };  
  }  
};  
</script>
在这个例子中，baseStyles 和 overridingStyles 将合并为一个样式对象，并应用到 <div> 元素上。由于 overridingStyles 中也定义了 fontSize 属性，因此它将覆盖 baseStyles 中的 fontSize 属性。

通过使用这些绑定方法，你可以根据组件的状态或属性动态地改变元素的样式，从而实现更加灵活和响应式的 UI。