主要介绍Vue3中的新增的<code>v-bind()的常用使用方式，主要包括在css,less,scss中的使用，可以参考官方文档查看：Vue3官方文档

特别提醒

如果你想在scss中或者less中使用，可能会报各种乱七八糟的错误，最快最好用的方式就是单独定义一个style标签，直接使用css模式使用变量就好了：

或者在scss的style最外层使用，不然不起作用还报错：

常规使用方式

单文件组件的 <code><style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态：

<template>

<div class="text">hello</div>code>

</template>

<script>

export default {

data() {

return {

color: 'red'

}

}

}

</script>

<style>

.text {

color: v-bind(color);

}

</style>

这个语法同样也适用于 <script setup>，且支持 JavaScript 表达式 (需要用引号包裹起来)：

<script setup>

const theme = {

color: 'red'

}

</script>

<template>

<p>hello</p>

</template>

<style scoped>

p {

color: v-bind('theme.color');

}

</style>

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。