4.3 绑定内联样式

使用v-bind:style（即：style）可以给元素绑定内联样式，方法与：class类似，也有对象语法和数组语法，看起来很像直接在元素上写CSS：

        <div id="app">
            <div :style="{ 'color': color, 'fontSize': fontSize + 'px' }">文本</div>
        </div>
        <script>
            var app = new Vue({
              el: '#app',
              data: {
                  color: 'red',
                  fontSize: 14
              }
            })
        </script>

CSS属性名称使用驼峰命名（camelCase）或短横分隔命名（kebab-case），渲染后的结果为：

        <div style="color: red; font-size: 14px; ">文本</div>

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或computed里，以data为例改写上面的示例：

        <div id="app">
            <div :style="styles">文本</div>
        </div>
        <script>
            var app = new Vue({
              el: '#app',
              data: {
                  styles: {
                      color: 'red',
                      fontSize: 14 + 'px'
                  }
              }
            })
        </script>

应用多个样式对象时，可以使用数组语法：

        <div :style="[styleA, styleB]">文本</div>

在实际业务中，:style的数组语法并不常用，因为往往可以写在一个对象里面；而较为常用的应当是计算属性。

另外，使用：style时，Vue.js会自动给特殊的CSS属性名称增加前缀，比如transform。