样式绑定 :style
上节课我们讲了class样式的各种绑定用法,本节我们来学习style的用法吧。
众所周知,class是调用全局样式集合的,而style则是写具体的每个样式细节的,优先级是高于class的。
同样我们,由浅入深,一点点来学习。
代码语言:javascript复制1.原生写法
<div style="color:green;font-size:30px">菜鸟教程</div>
2.vue写法
如图,我们在style前面加上了绑定指令:v-bind:
然后值变成了一个大字典,里面的每个样式名不用加引号,而值要加引号。
3.vue绑定变量写法
此时我们可以通过控制变量,来动态实时的更改它的样式了。
4.vue绑定一个样式对象
这样方便我们控制,也能让dom层的样式里少写几个变量名。
5.多个样式对象,放在列表的写法
好了本节课就到这里,怎么样,是不是感觉很简单???