vue样式绑定7种实现方法

1. 绑定对象到 class

将一个对象绑定到元素的 class，对象的键是类名，值是布尔值，表示类是否应用。

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

2. 绑定数组到 class

可以将一个数组绑定到 class，数组中的元素是类名。

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

<script>
export default {
  data() {
    return {
      errorClass: 'text-danger'
    }
  }
}
</script>

3. 使用计算属性绑定 class

利用计算属性实现更复杂的逻辑。

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

<script>
export default {
  computed: {
    classObject() {
      return {
        active: this.isActive,
        'text-danger': this.hasError
      }
    }
  }
}
</script>

4. 绑定对象到 style

将一个对象绑定到 style，对象的键是 CSS 属性，值是属性值。

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

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 14
    }
  }
}
</script>

5. 绑定数组到 style

将多个内联样式对象组合在一个数组中。

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

<script>
export default {
  data() {
    return {
      baseStyles: {
        color: 'blue',
        fontSize: '12px'
      },
      overridingStyles: {
        fontSize: '16px'
      }
    }
  }
}
</script>

6. 使用组件 Prop 绑定 class 或 style

通过传递 Prop 来动态设置子组件的样式。

<template>
  <my-component :class="componentClass" :style="componentStyle"></my-component>
</template>

<script>
export default {
  data() {
    return {
      componentClass: {
        'my-class': true
      },
      componentStyle: {
        color: 'green'
      }
    }
  }
}
</script>

7. 动态条件组合的 class 和 style

混合使用动态绑定和模板语法，结合条件逻辑来动态设置多个样式。

<template>
  <div :class="[isActive ? 'active' : '', errorClass]" :style="styleObject"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      errorClass: 'text-danger',
      styleObject: {
        backgroundColor: 'gray'
      }
    }
  }
}
</script>