Vue.js前端開發(fā)框架應用（微課版） 課件 第五章 Vue.js樣式綁定

Vue.js前端開發(fā)框架應用Vue.js樣式綁定目

錄Vue.js綁定樣式通過數(shù)組綁定樣式Vue.js綁定內聯(lián)樣式使用計算屬性綁定樣式Vue.js樣式綁定一、Vue.js綁定樣式靜態(tài)綁定樣式

靜態(tài)綁定指的是直接使用v-bind:class（縮寫為:class）指令將樣式綁定到HTML元素的class屬性，該方式等同于直接固定HTML元素的樣式，是最基本的綁定樣式方式。

【案例5?1】直接綁定樣式。Vue.js樣式綁定一、Vue.js綁定樣式動態(tài)綁定樣式Vue.js可以使用綁定對象或綁定數(shù)組的方式設置HTML元素的樣式。

綁定對象指的是給v-bind:class（縮寫為:class）指令傳遞一個對象來動態(tài)設置HTML元素的樣式。

【案例5?2】綁定對象設置樣式。案例中“bigFont”樣式是否有效是由“useFont1”的值決定的，true為有效，false為無效。Vue.js樣式綁定一、Vue.js綁定樣式動態(tài)綁定樣式Vue.js可以使用綁定對象或綁定數(shù)組的方式設置HTML元素的樣式。

綁定對象指的是給v-bind:class（縮寫為:class）指令傳遞一個對象來動態(tài)設置HTML元素的樣式。

【案例5?3】動態(tài)改變樣式。Vue.js樣式綁定一、Vue.js綁定樣式綁定多個樣式Vue.js可以使用綁定對象或綁定數(shù)組的方式設置HTML元素的樣式。采用:class指定綁定對象時可以為一個html元素同時綁定多個樣式，并且可以動態(tài)指定哪些樣式啟用，哪些樣式不啟用。

【案例5?4】綁定多個樣式。:class指令綁定的對象可以有多個字段，每個字段對應樣式名，字段的值決定該樣式是否啟用。目

錄Vue.js綁定樣式通過數(shù)組綁定樣式Vue.js綁定內聯(lián)樣式使用計算屬性綁定樣式Vue.js樣式綁定二、通過數(shù)組綁定樣式Vue.js支持綁定包含CSS樣式的數(shù)組，通過:class指令綁定一個包含多個CSS樣式或樣式對象的數(shù)組，數(shù)組中的全部樣式會被渲染到目標html元素

【案例5?5】數(shù)組綁定樣式。:class指令綁定數(shù)組，數(shù)組元素可以是樣式名或表示樣式的對象目

錄Vue.js綁定樣式通過數(shù)組綁定樣式Vue.js綁定內聯(lián)樣式使用計算屬性綁定樣式Vue.js樣式綁定三、Vue.js綁定內聯(lián)樣式直接綁定內聯(lián)樣式:style指令可綁定包含內聯(lián)樣式的JavaScript對象，其對應的是html元素的style屬性。

【案例5?6】綁定內聯(lián)樣式。:style指令綁定含內聯(lián)樣式的對象，對象的字段是內聯(lián)樣式名，值是樣式值。Vue.js樣式綁定三、Vue.js綁定內聯(lián)樣式通過數(shù)組綁定內聯(lián)樣式:style指令也持綁定一個包含多個內聯(lián)樣式JavaScript對象的數(shù)組，數(shù)組中的對象包含的內聯(lián)樣式會被合并后渲染到目標html元素上。

【案例5?7】通過數(shù)組綁定內聯(lián)樣式。:style指令綁定數(shù)組，數(shù)組元素是內聯(lián)樣式對象。目

錄Vue.js綁定樣式通過數(shù)組綁定樣式Vue.js綁定內聯(lián)樣式使用計算屬性綁定樣式Vue.js樣式綁定三、使用計算屬性綁定樣式:class和:style指令都支持使用計算屬性綁定樣式，采用計算屬性后樣式的綁定能更好的支持包含復雜程序邏輯的