vue中style和class

在 Vue 中，可以使用 style 和 class 绑定语法来动态绑定样式和类。

### 动态绑定 style

可以使用 v-bind:style 指令将一个对象传递给 style 属性，从而动态绑定样式。对象中的键是 CSS 属性名，值是对应的 CSS 属性值。

例如，可以动态绑定文本颜色：

<template>
  <div v-bind:style="{ color: textColor }">This text is {{ textColor }}</div>
</template>

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

在这个例子中，使用 v-bind:style 指令将一个对象传递给 style 属性。对象中的键是 color，值是 textColor 变量的值。

### 动态绑定 class

可以使用 v-bind:class 指令将一个对象传递给 class 属性，从而动态绑定类。对象中的键是类名，值是一个布尔值，如果值为 true，则对应的类将被应用，否则该类将被移除。

例如，可以根据条件动态绑定类：

<template>
  <div v-bind:class="{ red: isRed, bold: isBold }">This text is styled</div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true,
      isBold: false
    }
  }
}
</script>

<style>
.red {
  color: red;
}

.bold {
  font-weight: bold;
}
</style>

在这个例子中，使用 v-bind:class 指令将一个对象传递给 class 属性。对象中的键是类名，值是一个布尔值。如果 isRed 的值为 true，则 red 类将被应用；如果 isBold 的值为 false，则 bold 类将被移除。