《跟热饭一起学习vue吧》Part.16样式绑定style
作者：红烧大青虫 | 来源：互联网 | 2023-06-11 13:28
本公众号的系列文章《跟热饭一起学习vue吧》，本文会采用非常土，非常low的语言，让读者学习并立即上手即可使用vue去写前端页面。简单生动，由浅入深。那么，就一起开始学习吧，体验一
本公众号 的系列文章《跟热饭一起学习vue吧》，本文会采用非常土，非常low的语言，让读者学习并立即上手即可使用vue去写前端页面。简单生动，由浅入深。那么，就一起开始学习吧，体验一把又土又油腻的教程吧~
别忘了先打开我们的菜鸟编辑器当做草纸吧：右键左下角“阅读原文”在新窗口中打开链接，会打开在线编辑器。
样式绑定 ：style
上节课我们讲了class样式的各种绑定用法，本节我们来学习style的用法吧。
众所周知，class是调用全局样式集合的，而style则是写具体的每个样式细节的，优先级是高于class的。
同样我们，由浅入深，一点点来学习。
1.原生写法
菜鸟教程
2.vue写法
如图，我们在style前面加上了绑定指令：v-bind:
然后值变成了一个大字典，里面的每个样式名不用加引号，而值要加引号。
3.vue绑定变量写法
此时我们可以通过控制变量，来动态实时的更改它的样式了。
4.vue绑定一个样式对象
这样方便我们控制，也能让dom层的样式里少写几个变量名。
5.多个样式对象，放在列表的写法
好了本节课就到这里，怎么样，是不是感觉很简单？？？感觉简单的话，就立马关注下本公众号吧~ 进群学习请加v：qingwanjianhua
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 