【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菌做好朋友
「其他文章」
- 【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】基礎系列(六)事件處理 - 綁定監聽 - 事件修飾符 - 按鍵修飾符
- 【Vue】基礎系列(四)樣式綁定 - class - style
- 【Vue】基礎系列(二)模板語法 - 插值語法 - 指令語法 - | v-bind | v-model | v-on | v-if | v- show
- 【Vue】實戰項目:電商後台管理系統(九)項目優化 上線
- 【Vue】實戰項目:電商後台管理系統(八)數據統計模塊