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

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


样式绑定 :style


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


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


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


1.原生写法


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


2.vue写法


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


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


3.vue绑定变量写法

image.png


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


4.vue绑定一个样式对象


image.png


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


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

image.png


相关文章
|
10天前
vue3学习(3)
vue3学习(3)
|
23天前
|
JavaScript
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
这篇文章详细介绍了Vue中的插槽(Slots)概念,包括默认插槽、具名插槽和作用域插槽的用法。通过实际的代码示例和项目结构,文章展示了如何在组件中定义和使用插槽,以及如何通过插槽向组件传递内容和数据。
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
|
14天前
|
JavaScript 开发者
vue学习之响应式数据绑定
响应式数据绑定
25 0
|
1天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
189 62
|
10天前
|
JavaScript 前端开发
vue3学习(1)
vue3学习(1)
90 44
|
1天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
23 10
|
1天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
180 63
|
10天前
|
JavaScript
vue3学习(2)
vue3学习(2)
|
22天前
|
JavaScript
Vue学习之--------消息订阅和发布、基础知识和实战应用(2022/8/24)
这篇文章介绍了Vue中消息订阅和发布的机制,作为组件间通信的一种方式,特别适用于任意组件间的通信。文章通过基础知识讲解和具体的代码实例,展示了如何使用`pubsub-js`库来安装、订阅、发布消息,并在组件销毁前取消订阅以避免内存泄漏。
Vue学习之--------消息订阅和发布、基础知识和实战应用(2022/8/24)
|
14天前
|
JavaScript
在vue使用vant在<stylus>中修改样式
在vue使用vant在<stylus>中修改样式
22 0