v-bind通常用來繫結屬性的，格式是v-bind：屬性名 = "值"，簡寫:屬性名 = "值" 

之前我們知道v-bind主要就是動態更新DOM的屬性的，class作為DOM的屬性當然也不例外，那麼v-bind怎麼動態更新class呢，分為三種方法:物件語法和陣列語法，還有就是變數語法：

變數語法：v-bind：class = "變數"，變數形式 ,這裡的變數的值，通常是在css定義好的類名；

陣列語法：v-bind：class= "[變數1，變數2]" ，陣列形式，其實跟上面差不多，只不過可以同時繫結多個class名；

物件語法：v-bind:class =  {classname1：boolean，classname2：boolean}，物件形式，這裡的classname1（2）其實就是樣式表中的類名，這裡的boolean通常是一個變數，也可以是常量、計算屬性等，這種方法也是繫結class最常用的方式。

一，在物件語法下：

 用v-vind動態設定class名，其值是一個物件（如上例子，當isName為真的時候就會存在類fontCol）:

HTML部分

<div id="container">
		<p :class="{fontCol:isName,setBack:!isAge}" class="weight">{{name}}</p>
		<i :class="addClass">{{name}}真好看！</i>
	</div>

var myApp = new Vue({
			el:"#container",
			// 條件比較少
			data:{
				isName:true,
				isAge:false,
				name:"功守道"
			},
			// 條件多的時候
			computed:{
				addClass:function(){
					return {
						checked:this.isName&&!this.isAge
					}
				}
			}
		})
 

注意：既然是一個物件，那麼該物件內的屬性可能不唯一，但總是每一項為真的時候，對應的類名就會存在。

2.不過當v-bind：class的表示式過長或者邏輯複雜（一般當條件多於兩個的時候，可以考慮採用計算屬性，返回一個物件）

二,在陣列語法下（一般用在當需要繫結多個class名的時候）：
1.值是一個數組(不論採用何種方法，最後值是一個數組就行)
2.在陣列語法中可以使用物件語法，陣列中的某一項可以是一個物件，當然當條件比較多的時候建議使用計算屬性，返回一個數組即可（例子略），

3.陣列中的值也可以直接就是class名，也可來源於data項

HTML部分

<div id="container1">
		<!-- 僅僅陣列 -->
		<div  :class="[huClas,heClas]">{{name}}</div>
		<!-- 三元表示式 -->
		<div :class="[isAge?huClas:heClas,ju]">{{name}},還行吧！</div>
		<!-- 該模式下類名huijia一直存在，還有一個類名根據isAge的真假來判斷去留 -->
		<div :class="arrMethod">{{name}},有點不好看</div>
		<!-- 計算屬性huijia一直存在，其他的根據情況 -->
	</div>

// 陣列語法：
		var myApp1 = new Vue({
			el:"#container1",
			// 當條件比較少的時候
			data:{
				judge1:false,
				isAge:true,
				name:"功夫熊貓",
				huClas:"haha",
				heClas:"heihei",
				ju:"huijia"
			},
			// 條件多的時候
			computed:{
				arrMethod:function(){
					return [
						this.ju,
						{
							heClas:this.judge1&&this.isAge,
							huClas:this.isAge
						}
					]
				}
			}
		})

v-bind繫結style，有兩種寫法一種是物件寫法，如下例，一種是陣列寫法（不常用，陣列中的每一項其實都是一個樣式物件,其實直接寫在一個物件裡就行了。）；

<!-- 直接繫結 -->
	<div id="container" :style="{color:color,fontSize:fontSize+'px'}">
		{{house}}
		<!-- 計算屬性 -->
		<h2 :style="style1">{{house}}</h2>
		<!-- data中的 -->
		<h3 :style="style">{{house}}</h3>
	</div>
	<script type="text/javascript" src="../../dist/vue.min.js"></script>
	<script type="text/javascript">
		var myApp = new Vue({
			el:"#container",
			data:{
				house:"世家星城二期",
				color:"red",
				fontSize:18,
				style:{
					background:"yellow",
					fontSize:24+"px"
				}
			},
			// 計算屬性
			computed:{
				style1:function(){
					return {
						fontSize:this.fontSize+"px",
						fontWeight:"italic",
						border:"1px solid #ff0000"
					}
				}
			}
		})

1.屬性名一般採用駝峰命名法，屬性值可以來源於data項，也可以是自己設定的固定值，
2.不建議直接在DOM中寫物件，因為不容易維護，可以將樣式物件寫在data項中或者是計算屬性中