五十九、Vue中的样式绑定
@Author：Runsen
@Date：2020/10/16
大四是一个焦虑的时期。烦恼有时候是具体问题带来的压力，有时候却是无端的、莫名其妙的，有时候还极易受到外界的影响，别人一句话就会激起内心难以遏制的波澜。
大四我的目标弃算法，转前端。要求在一个多月提升自己的前端能力。
文章目录
绑定Class
对象语法
数组语法
绑定内联样式
今天加深Vue的学习，主要学习Vue中的样式绑定。其中
绑定Class
在数据绑定中，最常见就是动态绑定元素的 class 或内联样式 style 咯，它们也是 HTML 的属性，所以可以使用 v-bind 指令 。
对象语法
第1种使用方式：对象语法
传递一个js表达式，组值写类名就行了，但class 需要使用v-bind（简写为“:”）做数据绑定。
下面实现点击Hello World，字体颜色就变化的点击事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
数组语法
第2种使用方式：数组语法
传递一个js表达式，组值写类名就行了，但class 需要使用v-bind（简写为“:”）做数据绑定。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
绑定内联样式
1、第一种： 通过对象 如:style="styleObj"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
第二种： 通过数组 如:style="[ styleObj , {fontSize: '20px'}]"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
参考
官方文档：https://cn.vuejs.org/v2/guide/class-and-style.html
https://mp.weixin.qq.com/s/P_CLyjWRW2f6ALnfYOfg0g
慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发：https://coding.imooc.com/learn/list/203.html
我现在内心里的想法，就是希望你们接下来这一年不被虚度。这是你们人生中最美好时代中的一年，它不是拿来过渡、等待或者牺牲的。现在这一年才刚刚开始。
Vue 数据结构
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
推荐文章
最近发表
