abc

Appearance

组件状态驱动的 CSS 变量 (style vars) ​

单文件组件状态驱动的 CSS 变量 (style vars) 实验性

  • <style scoped vars="{ fontSize }"> .txt { font-size: var(--fontSize); } </style>
  • 以上 style vars 写法 已被新提案(style v-bind)取代
  • 相关链接：https://github.com/vuejs/rfcs/pull/231

@/pages/40-lrn/20-vue3/65-style-vars/components/StyleVarsExample.vue

hi
fontSize: color:
vue
<template>
    <div class="txt">hi</div>
    fontSize: <input type="text" v-model="fontSize">
    color: <input type="text" v-model="color">
</template>

<script lang="ts" setup>
import { ref } from "vue"
const fontSize = ref('12px');
const color = ref('red');
</script>

<style scoped>
.txt {
    font-size: v-bind(fontSize);
    color: v-bind(color);
}
</style>