五十九、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小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。