【Vue】基礎系列(四)樣式繫結 - class - style
theme: vue-pro highlight: a11y-dark
嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號:
yk2012yk2012
,微信公眾號:ykyk2012
]
「這是我參與11月更文挑戰的第18天,活動詳情檢視:2021最後一次更文挑戰」
在應用介面中, 某個(些)元素的樣式是變化的,
class
/style
繫結就是專門用來實現動態樣式效果的技術
1. class
繫結
javascript
:class='xxx' // xxx可以是字串、物件、陣列。
字串
1) 表示式是字串: 'classA'
適用於:類名不確定,要動態獲取
```js
{{name}}
```
物件
2) 表示式是物件: {classA:isA, classB: isB}
適用於:要繫結多個樣式,個數不確定,名字也不確定
```js
{{name}}
```
陣列
3) 表示式是陣列: ['classA', 'classB']
適用於:要繫結多個樣式,個數確定,名字也確定,但不確定用不用
```js
{{name}}
```
2. style
繫結
javascript
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中 activeColor
/fontSize
是 data 屬性
javascript
:style="{fontSize: xxx}"其中xxx是動態值。
:style="[a,b]"其中a、b是樣式物件。
物件
```js
{{name}}
```
陣列
```js
{{name}}
```
最後,歡迎關注我的專欄,和YK菌做好朋友
「其他文章」
- 從校園到職場 | YK菌的2022年中總結
- 【青訓營】月影老師告訴我寫好JavaScript的三大原則——元件封裝
- 【青訓營】月影老師告訴我寫好JavaScript原則與技巧大總結
- 2022屆秋招,從被拒到上岸 | 談談YK菌在2021年的經歷與收穫
- 【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
- 【LeetCode】圖解反轉連結串列 - 迭代 - 遞迴
- 【LeetCode】最大子序和從O(N^3)到O(N) - 暴力初探 - 分而治之 - 線上處理
- 【JS】JavaScript基礎知識自我檢查大過關(第三關)函式定義與呼叫
- 【Vue】高階系列(六)Vue-cli配置代理 -demo3-GitHub使用者查詢-axios
- 【Vue】高階系列(五)元件間通訊
- 【Vue】高階系列(四)Vue模組化實戰-demo2-任務清單todoList
- 【TS】快速上手(二)型別宣告
- 【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面
- 【Vue】高階系列(二)Vue相關小知識
- 【Vue】高階系列(一)Vue元件定義與使用 - 非單檔案元件 - 單檔案元件 - VueComponent
- 【Vue】基礎系列(十一)Vue指令-常用內建指令-自定義指令-全域性指令-區域性指令
- 【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave
- 【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子元件
- 【Vue】基礎系列(七)v-model - 自動收集資料 - 表單資料自動更新
- 【Vue】基礎系列(六)事件處理 - 繫結監聽 - 事件修飾符 - 按鍵修飾符