之前說(shuō)過(guò) v-bind 這東西可以綁class 那么必然也可以綁定實(shí)style 了，而且 也有 對(duì)象語(yǔ)法 和 數(shù)組語(yǔ)法：
?
先來(lái)對(duì)象語(yǔ)法：
因?yàn)槲覀冎?對(duì)象語(yǔ)句是 鍵 - 值 對(duì)的，所以呢 我們的鍵是 style 的屬性，值是對(duì)應(yīng)的值即可，值可以是變量也可以是字符串，如果值不是Vue中的變量，值要加單引號(hào)！不然報(bào)錯(cuò).
?還有一個(gè)點(diǎn)： 比如字體大小 font-Size 其中可以省略掉-，有些版本不省略會(huì)報(bào)錯(cuò)的.
Vue會(huì)當(dāng)做一個(gè)變量來(lái)解析.?
例如我要字體大小50px 而且 字體顏色 是 紅色，那么：
錯(cuò)誤寫(xiě)法：
<div?class="app">
<!--????下面的是錯(cuò)誤寫(xiě)法，因?yàn)閂UE會(huì)把?50px??和?red?當(dāng)做一個(gè)變量來(lái)解析，找不到那就報(bào)錯(cuò)了????-->
????????<p?:style="{fontSize:?50px,color:red}">顏色：red?字體大?。?50?px</p>
????</div>
正確寫(xiě)法：
<div?class="app">
????????<p?:style="{fontSize:?'50px',color:'red'}">顏色：red?字體大?。?50?px</p>
????</div>
????<script>
????????const?app?=?new?Vue({
????????????el:".app",
????????})
????</script>
?
，所以你的值可以是一個(gè)變量：【在Vue中的data先定義哦】
<div?class="app">
????????<p?:style="{fontSize:?size?+?'px',color:fontColor}">顏色：red?字體大?。?50?px</p>
????</div>
????<script>
????????const?app?=?new?Vue({
????????????el:".app",
????????????data:{
????????????????size:50,
????????????????fontColor:"red"
????????????}
????????})
????</script>
?
所以呢 綁定這個(gè)有什么用，因?yàn)轫憫?yīng)式 用戶就可以在你這里很快速選擇某些樣式 然后直接改變即可，復(fù)用性挺高.
?
數(shù)組語(yǔ)法：【比較不用】
因?yàn)槲覀冎罃?shù)組是沒(méi)有鍵值對(duì)的 所以呢我們可以直接在數(shù)組里面加Vue的變量，變量里面都定義好的數(shù)據(jù)（鍵值對(duì)）：
<div?class="app">
????????<p?:style="[color_red,font_size]">顏色：red?字體大?。?50?px</p>
????</div>
????<script>
????????const?app?=?new?Vue({
????????????el:".app",
????????????data:{
????????????????color_red:{color:'red'},
????????????????font_size:{fontSize:'50px'}
????????????}
????????})
????</script>
看代碼可知道 這樣的話肯定要先學(xué)對(duì)象語(yǔ)法，在學(xué)這玩意， 所以還不如直接用對(duì)象語(yǔ)法呢，
Tips：Vue中變量 定義 的鍵值可以有很多很多；上面定義了一個(gè)，所以主題邏輯就可以這樣寫(xiě)了，
其次你完全也可以在數(shù)組里直接干[{xxx},{xx}] 但很畫(huà)蛇添足 沒(méi)用.
?
作者：??咸瑜???
APP 