vue 动态控制组件css样式

可以使用Vue的计算属性和绑定class来动态控制组件的CSS样式。具体步骤如下：

1.在Vue组件中定义计算属性，根据需要动态计算CSS类名。

2.使用v-bind:class指令将计算属性绑定到组件的class属性上。

下面是一个例子，假设我们需要根据用户的选择动态改变按钮的颜色：

<template>
  <button v-bind:class="buttonClass">Click me!</button>
</template>

<script>
export default {
  data() {
    return {
      isRed: false,
      isBlue: true
    };
  },
  computed: {
    buttonClass() {
      return {
        'red-button': this.isRed,
        'blue-button': this.isBlue
      };
    }
  }
};
</script>

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

.blue-button {
  background-color: blue;
}
</style>

在上面的例子中，我们定义了两个计算属性isRed和isBlue，它们根据用户的选择动态计算CSS类名。然后我们使用v-bind:class指令将计算属性buttonClass绑定到按钮的class属性上。