1、绑定样式

没啥好说的、我觉得还没直接引入外部写好的css样式方便（个人想法）

1.1 基础知识

绑定样式：

• 1、class样式
  写法:class=“xxx” xxx可以是字符串、对象、数组。
  字符串写法适用于：类名不确定，要动态获取。
  对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
  数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
• 2、style样式
  :style="{fontSize: xxx}“其中xxx是动态值。
  :style=”[a,b]"其中a、b是样式对象。

1.2 代码实例

    
    
    
    
    



    
"App">
        
        
"basic" :class="mood" @click="changeMood">{{name}}
 



        
        
{{name}}
 



        
        
{{name}}
 



        
        
{{name}}
 


        
        
{{name}}


    
    




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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

1.3 测试效果

2、条件渲染

2.1 基本知识

条件渲染：
1、v-if 写法：

• (1)、v-if=“表达式”
• (2)、v-else-if=“表达式”
• (3)、v-else=“表达式”

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。（如果结构打断、打断后的流程不在执行）

2、v-show写法：

• v-show=“表达式”

适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3、备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

2.2 代码实例

    
    
    
    



    
    

        
        
欢迎茶颜悦色的小主：{{name}}
        
欢迎茶颜悦色的小主(flag)：{{name}}
        
欢迎茶颜悦色的小主(表达式)：{{name}}

        
        
欢迎来到{{name}}
        
欢迎来到{{name}}

        
当前的n值是:{{num}}
        @click="num++">点我n+1
        
        
"num === 1">Angular
        
"num === 2">React
        
"num === 3">Vue
        
哈哈


        
        




    
    




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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

2.3 测试效果