vue 通过变量控制样式多种方式

在Vue中，可以通过以下几种方式来通过变量控制样式：

1 使用动态绑定class属性：可以通过在class属性中绑定一个计算属性或者直接绑定一个变量来控制样式。例如

```
<template>
<div :class="{'active': isActive}">样式控制</div>
</template>

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

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

```

在上述示例中，isActive变量控制了是否添加active类，从而改变了文字的颜色。
2 使用内联样式绑定：可以通过在元素上绑定一个style属性，将样式直接绑定到一个变量上。例如：

```
<template>
<div :style="{color: textColor}">样式控制</div>
</template>

<script>
export default {
data() {
return {
textColor: 'red'
}
}
}
</script>

```

在上述示例中，textColor变量控制了文字的颜色。

3 使用计算属性：可以通过计算属性来根据变量的值动态生成样式。例如：

<template>
  <div :style="computedStyle">样式控制</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  computed: {
    computedStyle() {
      return {
        color: this.isActive ? 'red' : 'blue'
      }
    }
  }
}
</script>

在上述示例中，isActive变量控制了文字的颜色，通过计算属性computedStyle动态生成样式。

以上是几种常见的通过变量控制样式的方式，在实际开发中可以根据具体需求选择合适的方式来实现样式的动态控制。