Vue-----Class与Style绑定

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 的数组语法可以将多个样式应用到一个元素上。