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>
