vue实现样式添加

内联样式绑定

在Vue中可以通过v-bind:style或简写:style直接绑定内联样式。对象语法中，CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebab-case，需用引号括起）。

<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',
        padding: '10px'
      },
      overridingStyles: {
        color: 'green'
      }
    }
  }
}
</script>

自动前缀处理

当使用需要浏览器前缀的CSS属性时（如transform），Vue会自动检测并添加适当前缀。

<template>
  <div :style="{ transform: 'scale(1.1)' }">
    自动添加浏览器前缀
  </div>
</template>

绑定Class对象语法

通过对象语法可以动态切换class，对象的值为布尔值，决定是否应用对应class。

<template>
  <div 
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
  >
    Class对象语法
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

绑定Class数组语法

通过数组语法可以应用多个class，适用于需要应用多个固定class的场景。

<template>
  <div :class="[activeClass, errorClass]">
    Class数组语法
  </div>
</template>

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

组件上的Class绑定

在自定义组件上使用class绑定时，这些class会被添加到组件的根元素上，且不会覆盖原有class。

<template>
  <my-component :class="{ active: isActive }"></my-component>
</template>

动态样式计算

对于需要复杂逻辑计算的样式，可以使用计算属性返回样式对象。

<template>
  <div :style="computedStyles">动态计算样式</div>
</template>

<script>
export default {
  data() {
    return {
      baseSize: 10,
      multiplier: 2
    }
  },
  computed: {
    computedStyles() {
      return {
        fontSize: `${this.baseSize * this.multiplier}px`,
        color: this.baseSize > 5 ? 'red' : 'blue'
      }
    }
  }
}
</script>

CSS Modules支持

在单文件组件中，可以通过module特性使用CSS Modules，生成的class名会被哈希处理避免冲突。

<template>
  <div :class="$style.red">CSS Modules</div>
</template>

<style module>
.red {
  color: red;
}
</style>

预处理器支持

Vue单文件组件支持各种CSS预处理器，只需在<style>标签上添加lang属性。

<style lang="scss">
$primary-color: #333;
.text {
  color: $primary-color;
}
</style>

深度选择器

使用::v-deep或/deep/可以穿透scoped样式，影响子组件样式（Vue 2.x使用>>>）。

<style scoped>
::v-deep .child-component {
  color: red;
}
</style>