vue中如何动态添加样式

在Vue中，可以通过绑定class或style来动态添加样式。

绑定class

1. 对象语法

对象语法只能通过v-bind指令实现，需要传入一个对象，对象的键是类名，值是布尔值，当值为true时，类名生效，当值为false时，类名失效。

示例代码：

<template>
  <div :class="{ active: isActive }">动态添加class</div>
</template>

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

<style>
.active {
  background-color: red;
}
</style>

解释：

当isActive的值为true时，div会有active类，因此背景会变为红色。

2. 数组语法

数组语法允许在一个组件上同时应用多个类名。

示例代码：

<template>
  <div :class="[isActive ? 'active' : '', errorClass]">动态添加class</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      errorClass: 'error'
    }
  }
}
</script>

<style>
.active {
  background-color: red;
}
.error {
  color: #f00;
}
</style>

解释：

当isActive的值为true时，div会有active类，因此背景会变为红色。无论isActive的值是什么，div都会具有error类，因此字体颜色会变为红色。

绑定style

1. 对象语法

对象语法允许绑定多个style属性，需要传入一个对象，对象的键是style属性名，值是style属性值。

示例代码：

<template>
  <div :style="{ fontSize: fontSize + 'px', color: fontColor }">动态添加style</div>
</template>

<script>
export default {
  data() {
    return {
      fontSize: 14,
      fontColor: '#f00'
    }
  }
}
</script>

解释：

div的字体大小和颜色均是动态绑定的，具体值要看data中的fontSize和fontColor的值。可以在生命周期函数或方法中修改这两个值。

2. 数组语法

数组语法允许绑定多个style对象，每个对象都可以设置一个属性或多个属性的样式。

示例代码：

<template>
  <div :style="[styleObject1, styleObject2]">动态添加style</div>
</template>

<script>
export default {
  data() {
    return {
      styleObject1: {
        fontSize: '16px',
        color: '#f00'
      },
      styleObject2: {
        backgroundColor: '#000'
      }
    }
  }
}
</script>

解释：

div的样式由两个style对象合并而成。可以在生命周期函数或方法中修改styleObject1和styleObject2的值。

总结

Vue中动态添加类名和样式是非常容易实现的，只需要绑定相应的属性即可。使用时需要注意细节，比如动态添加类名时需要使用对象语法或数组语法，数组语法需要将布尔表达式转化为类名。动态添加样式时需要注意浏览器兼容性等问题。