vue3 绑定style样式

在 Vue 3 中，可以使用 `v-bind:style` 或者缩写语法 `:style` 来绑定样式。

用法：

1. 直接绑定一个样式对象：

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 16
    }
  }
}
</script>

在上面的代码中，我们使用 `:style` 绑定了一个样式对象，其中 `activeColor` 和 `fontSize` 是两个变量，分别对应了样式中的 `color` 和 `font-size` 属性。

2. 通过计算属性计算样式对象：

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

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 16
    }
  },
  computed: {
    styleObj() {
      return {
        color: this.activeColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

在上面的代码中，我们通过一个计算属性 `styleObj` 计算出样式对象，然后通过 `:style` 绑定到元素上。

无论是直接绑定样式对象还是通过计算属性计算样式对象，都可以使用 JavaScript 表达式来计算样式属性的值。