1、有了上一篇的基礎，接下來理解內聯樣式的設置會更簡單一點，先看正常的css內聯樣式：
<dvi id="app">
<p style="font-size:30px;color:red">vue內聯樣式定義</p>
</dvi>
在看看通過Vue的屬相綁定實現的具體情況：
<body>
<dvi id="app">
<p :style="styleObj">vue內聯樣式定義</p>
</dvi>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
styleObj:{'font-size':'30px','color':'red'}
},
method:{}
})
</script>
</body>
其實看起來也沒有什么太特殊的亮點，無非是通過參數傳遞，把定義好的樣式綁定到style屬性里，底層和css原理是一樣的。當然我們也可以像下面這么寫，效果是一樣的。
<dvi id="app">
<p :style="{'font-size':'30px','color':'red'}">vue內聯樣式定義</p>
</dvi>
2、我們再看看怎么同時使用多個內聯樣式對象
<body>
<dvi id="app">
<p :style="[styleObj1 , styleObj2]">vue內聯樣式定義</p>
</dvi>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
styleObj1:{'font-size':'30px','color':'red'},
styleObj2:{'font-style':'italic'}
},
method:{}
})
</script>
</body>
可以看到，頁面style屬性值用了數組，數組元素就是data里定義的樣式對象。我感覺用Vue寫內聯樣式的最大好處就是，相同樣式只用寫一份，然后可以直接調用，但是顯然這也是雞肋，畢竟css強大的功能特性在那里放着，具體怎么使用還是要看具體的應用場景。退一步說，我們現在看到的只是表象，Vue實現的真正意義還是要去看源碼解析才能發現其真正的作用價值，這里我們只是為了掌握了解vue的功能而已。
每天進步一點點！