Vue 3 - CSS 语法糖

vue 3.2 新增 https://blog.vuejs.org/posts/vue-3.2.html

<template>
  <div class="text">123123</div>
</template>
<script setup>
  const color = "red"
  const font = {
      size:"2em"
  }
</script>
<style scoped>
  /*一般CSS用法，定义变量*/
  root {
    --varColor: yellowgreen;
  }
  /*Vue3 语法糖，可以直接用v-bind绑定上面script标签里面的变量*/
  .text{
    color: v-bind(color);
        font-size: v-bind("font.size");
  }
</style>