0
点赞
收藏
分享

微信扫一扫

CSS 盒子模型(box model)

兽怪海北 03-05 22:30 阅读 4
css前端

概念

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

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

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

 使用

以组合式的写法为例,在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出的语法糖。

举报

相关推荐

0 条评论