vue3 <style> v-bind

vue3 可直接在style标签中使用v-bind绑定动态值

状态驱动的动态 CSS（官方文档）

<template>
  <div class="preview_wrapper">
    <span>测试文字</span>
  </div>
</template>

<script setup>
const color = ref('blue')
const size = ref('18px')
//修改
const toggle = () => {
  color.value = 'red'
  size.value = '24px'
}
</script>

<style lang="scss">
span {
  font-size: v-bind(size);
  color: v-bind(color);
}

以前的方法

<template>
  <div class="preview_wrapper">
    <span :style="{ color, fontSize: size }">测试文字</span>
    <el-button @click="toggle">切换</el-button>
  </div>
</template>

<script setup>
const color = ref('blue')
const size = ref('18px')
</script>