vue绑定内联样式

使用: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>

渲染后的结果为：

<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。