vue 实现动态样式
动态样式实现方法
在Vue中实现动态样式可以通过多种方式完成，主要依赖于Vue的响应式系统和绑定语法。
对象语法绑定class
通过对象语法可以动态切换class，对象的键是class名，值是布尔值决定是否应用该class：
<div :class="{ active: isActive, 'text-danger': hasError }"></div>对应的data定义：
data() {
return {
isActive: true,
hasError: false
}
}数组语法绑定class
数组语法允许同时应用多个class：
<div :class="[activeClass, errorClass]"></div>对应的data定义：
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}内联样式绑定
使用对象语法绑定内联样式：
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>对应的data定义：
data() {
return {
activeColor: 'red',
fontSize: 30
}
}数组语法绑定多个样式对象
可以将多个样式对象应用到同一个元素：
<div :style="[baseStyles, overridingStyles]"></div>计算属性处理复杂逻辑
对于更复杂的样式逻辑，可以使用计算属性：
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}动态CSS变量
Vue3支持在style标签中使用v-bind绑定响应式变量：
<script setup>
const theme = ref({
color: 'red'
})
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>条件样式应用
结合三元表达式实现条件样式：
<div :class="isActive ? 'active' : 'inactive'"></div>方法返回样式
通过方法返回样式对象：
<div :style="getStyles()"></div>方法定义：
methods: {
getStyles() {
return {
color: this.isActive ? 'red' : 'blue',
fontSize: this.size + 'px'
}
}
}这些方法可以单独使用或组合使用，根据具体需求选择最适合的实现方式。Vue的响应式系统确保样式会随着数据变化自动更新。
