vue中动态添加style样式

在Vue中动态添加style样式可以通过以下两种方式实现：

1. 使用计算属性和绑定class的方式，将样式写在计算属性中，然后通过class绑定到元素上。

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

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  },
  computed: {
    computedClass() {
      return {
        'my-class': true,
        'text-color': true,
        'bg-color': true,
        'color-red': this.color === 'red'
      }
    }
  }
}
</script>

<style>
.my-class {
  font-size: 16px;
}

.text-color {
  color: #333;
}

.bg-color {
  background-color: #f5f5f5;
}

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

2. 使用内联样式的方式，将样式写在data中，然后通过v-bind:style绑定到元素上。

<template>
  <div :style="computedStyle"></div>
</template>

<script>
export default {
  data() {
    return {
      styleObj: {
        fontSize: '16px',
        color: '#333',
        backgroundColor: '#f5f5f5'
      },
      color: 'red'
    }
  },
  computed: {
    computedStyle() {
      return Object.assign({}, this.styleObj, { color: this.color })
    }
  }
}
</script>