>本节讲解的内容对前面的章节具有依赖性，如果看起来有困难，请先看本系列前面的章节 ## 一、本节说明 上一节我们使用绑定对象或数组的语法来实现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> ```