Vue中的class和style绑定

在 Vue 中，class 和 style 绑定是非常实用的功能，它们允许开发者根据数据的状态动态地添加或修改 HTML 元素的 class 属性和 style 属性。

1. 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>

1. 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>