vue3新特性v-bind in CSS

概念

v-bind in CSS和v-bind是两个不同的概念不要弄混淆了，点击链接可以看官网详细的解释

v-bind:是用在template模板中，用来动态绑定参数的内置指令，一般我们用的是:简写。

v-bind in CSS：是用在style标签中，来获取在script中定义css属性值的变量，即我们能够在style标签中引入动态的css变量了。

注意，v-bind in css 是vue3新提出的属性，vue2并没有

 使用

以组合式的写法为例，在script标签中定义变量，在style标签中通过v-bind(变量名)，就可将css属性值动态设置了

<script setup>
    const color = 'red'
</script>

<template>
    <div>
        <p>hello</p>
    </div>
</template>

<style scoped>
p {
  color: v-bind(color);
}
</style>

原理

在使用v-bind in css后，vue3自动在组件根标签生成了自定义属性，值为我red，然后在p标签上通过var()函数传入自定义属性获取到我们定义的变量。

在vue3中我们不用手动定义自定义属性到根标签，且不用var()函数。这些都是vue3内部做的，在使用v-bind()后，vue3内部将定义的变量名x生成 --hash值-x自定义属性，设置到根标签style中，然后在v-bind的部分实际上是使用var()传入生成的 --hash值-x自定义属性。可以说v-bind()是vue3出的语法糖。