綁定內聯樣式可以通過綁定樣式對象和樣式字符串這兩種方式，讓指定的樣式在元素上生效。兩種方式都可以使用，不過第一種方式更加簡單一些。畢竟拼接字符串比較容易出錯。
一、邊讀編寫，頭腦清醒
<div v-bind:style="styleObject">Hello Boy! </div>,這段代碼通過綁定樣式對象，來渲染div。語法很簡單，使用v-bind指令，用:接上要綁定的特性（屬性），這裏是style。爾後通過=賦值符號告訴vue,請幫我們取styleObject對象，進行賦值。
看下styleObject要怎麼寫？這是一個json字符串，第一屬性定義字體顏色爲紅色；第二個屬性定義了字體大小爲24像素。
styleObject:{
color:'red',
fontSize:'24px'
}
完整代碼，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class與Style綁定</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--自定義頁面樣式，學習環境這樣寫；正式項目最好，將樣式分離出去。-->
<style type="text/css" rel="stylesheet">
</style>
</head>
<body>
<div id="app">
<div v-bind:style="styleObject">Hello Boy! </div>
</div>
</body>
</html>
<script type="text/javascript">
var vm =new Vue({
el:"#app",
data:{
//直接綁定樣式對象
styleObject:{
color:'red',
fontSize:'24px'
}
}
})
</script>
PS：趕緊來寫一寫，嘗試一下吧！騷年！