专业网站建设哪里找,seo排名赚app多久了,专业建站公司建站系统该规划哪些内容,有了网站后台后怎么做seo优化概念
v-bind in CSS和v-bind是两个不同的概念不要弄混淆了#xff0c;点击链接可以看官网详细的解释
v-bind:是用在template模板中#xff0c;用来动态绑定参数的内置指令#xff0c;一般我们用的是:简写。
v-bind in CSS#xff1a;是用在style标签中#xff0c;来获取…概念
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 setupconst color red
/scripttemplatedivphello/p/div
/templatestyle 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出的语法糖。
