阅读 22

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

样式绑定 :style

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

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

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

1.原生写法

<div style="color:green;font-size:30px">菜鸟教程</div>

复制代码

2.vue写法

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

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

3.vue绑定变量写法

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

4.vue绑定一个样式对象

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

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

图片

好了本节课就到这里,怎么样,是不是感觉很简单???感觉简单的话,就立马关注下本公众号吧~ 进群学习请加v:qingwanjianhua

本文使用 文章同步助手 同步

文章分类
代码人生
文章标签