Vue绑定class与行间样式style详解

在Vue中，我们可以通过v-bind指令来绑定元素的class和行间样式style，实现动态控制页面样式的效果。

绑定class

对象语法

在模板中，使用v-bind:class指令来绑定class。当对象中的属性值为true时，class会被应用到元素上，反之该class不会被应用。

示例代码如下：

<template>
  <div :class="{ active: isActive }"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>

上述代码中，div元素将绑定一个名为active的class，当isActive为true时，该class将被应用到元素上。

数组语法

我们也可以使用v-bind:class指令来使用数组语法来绑定多个class。这些class将会被同时应用到元素上。

示例代码如下：

<template>
  <div :class="[activeClass, errorClass]"></div>
</template>

<script>
export default {
  data() {
    return {
      activeClass: 'active',
      errorClass: 'error'
    };
  }
};
</script>

上述代码中，div元素将会被应用active和error两个class。

使用计算属性

我们还可以使用计算属性来控制元素的class。以此可以实现更复杂的样式控制效果。

示例代码如下：

<template>
  <div :class="computedClass"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  },
  computed: {
    computedClass() {
      return {
        active: this.isActive && !this.isError,
        error: this.isError,
      }
    }
  }
};
</script>

上述代码中，div元素将绑定一个computedClass计算属性，computedClass将根据isActive和isError的值动态计算返回一个class对象。

绑定行间样式

我们也可以使用v-bind指令来绑定元素的style属性，同样可以通过对象或数组进行绑定。

对象语法

使用对象语法时，我们需要使用驼峰式命名的形式来书写元素的行间样式。

示例代码如下：

<template>
  <div :style="{color: textColor, fontSize: fontSize + 'px'}"></div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    };
  }
};
</script>

上述代码中，div元素将绑定一个style属性，style属性将根据textColor和fontSize的值来动态计算。

数组语法

使用数组语法时，我们可以将多个样式对象或数组合并为一个对象或数组。

示例代码如下：

<template>
  <div :style="[baseStyles, overrideStyles]"></div>
</template>

<script>
export default {
  data() {
    return {
      baseStyles: {
        color: 'red',
        fontSize: '16px'
      },
      overrideStyles: {
        fontSize: '18px'
      }
    };
  }
};
</script>

上述代码中，div元素将绑定一个style属性，style属性将会先应用baseStyles中的样式，然后再覆盖overrideStyles中的fontSize样式。