第4章 樣式綁定

第4章

樣式綁定4.1

綁定HTML樣式字符串語法對象語法數組語法直接綁定靜態類名適用于固定樣式場景根據條件動態切換類名鍵為類名,值為布爾表達式組合多個類名或條件對象Vue3會智能合并常規class屬性和v-bind:class綁定的類名4.1.1

對象控制樣式基本用法多字段切換與普通class共存計算屬性綁定通過對象動態切換class屬性值對象中可傳入多個字段同時動態切換多個樣式類復雜邏輯可用計算算屬性返回對象v-bind:class可與普通class屬性共存兩者自動合并,不互相覆蓋類名存在與否取取決于對應布爾值保持模板簡潔,邏輯集中管理適合需要根據狀態頻繁切換樣式的場景4.1.2

數組控制樣式數組語法條件切換將數組傳給v-bind:class在元素上應用一個樣式列表在元素上應用一個樣式列表使用三元表達式切換樣式數組中可混合對象語法如[{active:isActive},errorClass]數組中每個元素對應一個類名多條件時對象語法更簡潔數組語法適合組合多個來源的類名,對象語法適合條件判斷4.1.3在組件中的應用單根元素組件多根元素組件class屬性添加到組件根元素上不會覆蓋根元素已有的樣式需通過$attrs屬性指定接收元素明確指定哪個根元素接收class數據綁定的class同樣適用樣式自動透傳合并避免樣式透傳歧義配合scopedstyle實現封裝組件樣式透傳是Vue3樣式系統的核心特性4.2

綁定內聯樣式:對象語法對象語法v-bind:style綁定JavaScript對象CSS屬性名支持駝峰式或短橫線分隔數據對象綁定可在data中單獨定義樣式對象模板更清晰,避免內聯冗長通過v-bind:style綁定該對象計算屬性綁定復雜樣式邏輯可用計算屬性返回自動響應依賴數據變化緩存結果,性能更優對象語法看起來像CSS,但實際是JavaScript對象4.2.1對象描述樣式4.2.2

數組描述樣式使用場景數組語法v-bind:style的數組語法基礎樣式+覆蓋樣式組合多個條件樣式對象合并將多個樣式對象應用到同一元素如v-bind:style="[baseStyles,moreStyles]"后定義的樣式可覆蓋前面的同名屬性分離公共樣式與動態樣式代碼結構更清晰數組語法適合組合多個來源的樣式對象4.2.3自動添加前綴

4.2.4多重值自動添加前綴多重值樣式Vue3自動偵測需前綴的CSS屬性為style屬性賦多個帶前綴值的數組只渲染最后一個被瀏覽器支持的值自動添加瀏覽器引擎前綴如transform自動添加:-webkit-(Chrome/Safari)-moz-(Firefox)、-ms-(IE)如display:[-webkit-box',"-ms-flexbox",'flex]瀏覽器支持flex則只渲染flex開發者無需手動處理前綴兼容性自動降級4.3實例：實現列表奇偶行不同樣式步驟1步驟2步驟3步驟4定義樣式:為偶數行定義樣式規則v-for循環:使用v-for指令循環輸出表格行攜帶索引參數index奇偶判斷:動態綁定:如使用v-bind:class對象語法(index+1)%2===0加1