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出的语法糖。

相关推荐
全栈技术负责人20 分钟前
前端网络性能优化实践:从 HTTP 请求到 HTTPS 与 HTTP/2 升级
前端·网络·http
码上暴富41 分钟前
Echarts雷达图根据数值确定颜色
前端·javascript·echarts
Mintopia1 小时前
在混沌宇宙中捕捉错误的光——Next.js 全栈 Sentry / LogRocket
前端·javascript·next.js
Mintopia1 小时前
长文本 AIGC:Web 端大篇幅内容生成的技术优化策略
前端·javascript·aigc
VueVirtuoso1 小时前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
少年阿闯~~1 小时前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher1 小时前
CSS 继承 (Inheritance)
前端·css
祈祷苍天赐我java之术1 小时前
Vue 整体框架全面解析
前端·javascript·vue.js
洛小豆2 小时前
Git 打标签完全指南:从本地创建到远端推送
前端·git·github
世间小小鱼2 小时前
【爬坑指南】亚马逊文件中心 AWS S3 预签名URL 前端直传
前端·云计算·aws