1.1繫結HTML Class

我們可以傳給 v - bind : class 一個物件，以動態地切換 class 。這裡 v-bind ： class 可以和普通的 class 共存。

<div id="app" class="static" v-bind:class="{'didi-orange': isRipe,'didi-green':isNotRipe}">	</div>

var vm=new Vue({
			el: '#app',
			data:{
			isRipe:true,
			isNotRipe:false
			}
		})

結果class =  "static didi-orange"

我們也可以直接繫結資料中的一個物件

<div id="app" class="static" v-bind:class="ddfe">	</div>

var vm=new Vue({
			el: '#app',
			data:{
				ddfe:{
		   'isRipe':true,
		    'isNotRipe':false
				}
			}
		})

還可以在這裡繫結一個返回物件的計算屬性。

var vm=new Vue({
			el: '#app',
			data:{
					didiAge:4,
				    didiMember:6000
			},
			computed:{
				ddfe:function(){
					return {
						'didi-orange':this.didiAge>3?true:false,
						'didi-large':this.didiMember>1000?true:false
					}
				}
			}
		})
 

當然我們還可以把一個數組傳給 v-bind：class,以應用一個 class 列表。

1.2 繫結內聯樣式

<div id="app" v-bind:style="{color:didiColor,fontSize:fontSize+'px'}">
		我是演示文字
	</div>

var vm=new Vue({
			el: '#app',
			data:{
				didiColor: 'orange',
				fontSize: 30
			}
		})

通常直接繫結到一個樣式物件更好，讓模板更清晰。

<div id="app1" v-bind:style="ddfe">
		我是演示文字
	</div>
 

var vm1=new Vue({
			el: '#app1',
			data:{
				ddfe:{
					color:'orange',
					fontSize:'13px'
				}
			}
		})

同樣的，物件語法常常結合返回物件的計算屬性使用。

<div id="app2" v-bind:style="ddfe">
		我是演示文字
	</div>

var vm1=new Vue({
			el: '#app2',
			data:{
				age: 4,
				member:6000
			},
			computed: {
				ddfe:function(){
					return {
						color:this.age>3? 'green':'orange',
						fontSize:this.member>1000?'20px':'10px'
				}
					
				}
			}
		})

v-bind：style 的陣列語法可以將多個樣式應用到一個元素上。