vue3.2样式绑定变量和单位

在Vue 3.2中，可以使用 `:style` 指令来绑定样式变量。例如：

<template>
  <div :style="{ fontSize: fontSize + 'px' }">Hello World</div>
</template>

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

在这个例子中，我们使用 `:style` 指令来绑定一个对象，这个对象包含了一个 `fontSize` 属性，属性的值是我们定义的变量 `fontSize` 加上一个单位 `'px'`。

当我们更新 `fontSize` 变量的值时，样式也会相应地更新。

除了使用字符串拼接来添加单位，我们也可以使用模板字符串来更方便地绑定样式变量和单位。例如：

<template>
  <div :style="{ fontSize: `${fontSize}px` }">Hello World</div>
</template>

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

这个例子中，我们使用模板字符串来绑定样式变量和单位。注意，我们需要使用反引号（`）来包裹模板字符串，并且在字符串中使用 `${}` 来引用变量，这样就可以更方便地添加单位了。