>本節講解的內容對前面的章節具有依賴性，如果看起來有困難，請先看本系列前面的章節 ## 一、本節說明 上一節我們使用綁定對象或數組的語法來實現css的class類動態樣式切換，這一節我們學習綁定style屬性值實現動態的樣式。 ### **注意：** * 我們使用v-bind來綁定class或style屬性的主要目的是實現：css樣式的動態切換。 * 如果單純的為html標簽加樣式，不需要動態切換，就不需要使用v-bind綁定。屬于畫蛇添足，自找麻煩。 ## 二、 怎么做 1. 直接在元素上通過 `:style` 的形式，書寫樣式對象 ``` <h2 :style="{color: 'red', 'font-size': '40px'}">這是一個紅色的H2</h2> ``` 2. 實現一個字體大小動態變化的需求  * 動態修改data.fontSize,從而達到動態改變字號大小的目的。 * 從上圖中，我們可以看到，可以將css樣式屬性保存在一個對象里面，綁定到style屬性上面。 * 抽取其中需要變化的部分，用數據模型變量來替換。從而達到動態修改樣式的效果 ## 三、 效果  ## 四、 深入 style屬性除了可以綁定一個對象，還可以使用數組綁定的語法，引用多個 `data` 上的樣式對象。用法如下： + 在data上定義樣式： ``` data: { style1: { color: 'red', 'font-size': '40px', 'font-weight': '200' }, style2: { font-style: 'italic' } } ``` + 在元素中，通過屬性綁定的形式，將樣式對象組成一個數組應用到元素中： ``` <h2 :style="[style1, style2]">這是一個藍色的斜體的h2</h2> ```