vue3新特性v-bind in CSS

概念

v-bind in CSSv-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出的语法糖。

相关推荐
小桥风满袖6 分钟前
极简三分钟ES6 - ES9中对象扩展
前端·javascript
云舟吖14 分钟前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
用户94818176754417 分钟前
超越NAT:如何构建高效、安全的内网穿透隧道
前端
明天的明20 分钟前
vue双向数据绑定失效
前端
bug_kada23 分钟前
前端路由:深入理解History模式
前端·面试
LIUENG25 分钟前
快速开发一个 VSCode 插件
前端·visual studio code
bug_kada25 分钟前
前端路由:Hash vs History,一篇讲明白!
前端·面试
城中的雾25 分钟前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
李明卫杭州28 分钟前
CSS 中 nth-child 选择器的详细用法和示例
前端
会豪28 分钟前
CSS 动画属性精讲:从基础到实战
前端·css