vue中动态添加style样式的几种写法总结

当我们在Vue中需要动态添加样式时，我们可以使用以下几种方法：

使用class绑定

Vue中可以使用:class或者:v-bind指令将一个变量与class属性绑定起来，这样我们可以通过改变变量的值来改变元素的class属性，从而改变样式。

<template>
  <div :class="{ 'selected': isSelected }"></div>
</template>
<script>
  export default {
    data() {
      return {
        isSelected: false
      }
    },
    methods: {
      toggleSelected() {
        this.isSelected = !this.isSelected;
      }
    }
  }
</script>
<style>
  .selected {
    background-color: red;
  }
</style>

这里的isSelected变量控制了div元素的样式，我们通过使用v-bind语法将isSelected与class属性绑定，当变量值为true时，div元素将会添加selected（被选中）这个class。

使用style绑定

与class绑定类似，我们也可以使用:style或者v-bind将一个变量与style属性绑定起来，这样我们可以通过改变变量的值来改变元素的样式。

<template>
  <div :style="{ backgroundColor: bgc }"></div>
</template>
<script>
  export default {
    data() {
      return {
        bgc: 'white'
      }
    },
    methods: {
      changeBackground() {
        this.bgc = 'red';
      }
    }
  }
</script>
<style>
  div {
    width: 100px;
    height: 100px;
  }
</style>

通过在style属性中使用对象语法，我们将bgc绑定到了backgroundColor属性上，当我们点击按钮时，bgc将会变成red，div元素的背景颜色将发生变化。

如果需要动态绑定多个属性，我们可以将多个属性名和值以键值对的形式存储在一个对象中，并将这个对象绑定到style属性上。如下所示：

<template>
  <div :style="styleObj"></div>
</template>
<script>
  export default {
    data() {
      return {
        styleObj: {
          backgroundColor: 'white',
          color: 'black',
          fontSize: '20px'
        }
      }
    },
    methods: {
      changeBackground() {
        this.styleObj.backgroundColor = 'red';
      }
    }
  }
</script>

使用三目运算符

如果需要在某个条件满足时才给元素添加特定样式，我们也可以使用三目运算符来实现。

<template>
  <div :class="isActive ? 'active' : ''"></div>
</template>
<script>
  export default {
    data() {
      return {
        isActive: false
      }
    },
    methods: {
      toggleActive() {
        this.isActive = !this.isActive;
      }
    }
  }
</script>
<style>
  .active {
    background-color: red;
  }
</style>

在这个例子中，当isActive为true时，div元素将有一个名为active的class，这样会通过样式控制使这个元素的背景色变为红色。

以上就是三种常见的动态添加样式的写法。

希望能对你有所帮助。