《跟热饭一起学习vue吧》Part.16 样式绑定-style

2022-05-19 17:00:00 浏览数 (2)

样式绑定 :style

上节课我们讲了class样式的各种绑定用法,本节我们来学习style的用法吧。

众所周知,class是调用全局样式集合的,而style则是写具体的每个样式细节的,优先级是高于class的。

同样我们,由浅入深,一点点来学习。

1.原生写法

代码语言:javascript复制
<div style="color:green;font-size:30px">菜鸟教程</div>

2.vue写法

如图,我们在style前面加上了绑定指令:v-bind:

然后值变成了一个大字典,里面的每个样式名不用加引号,而值要加引号。

3.vue绑定变量写法

此时我们可以通过控制变量,来动态实时的更改它的样式了。

4.vue绑定一个样式对象

这样方便我们控制,也能让dom层的样式里少写几个变量名。

5.多个样式对象,放在列表的写法

好了本节课就到这里,怎么样,是不是感觉很简单???

0 人点赞