Vue中的class和style（Vue05）

Vue中的class

const vm = new Vue({      
	el: '#app',      
	data: {        
		a: 'box',        
		b: 'box2',        
		isActive:false      
	}    
})

<div id="app">    
	<div :class="a"></div>    
	<!-- div class="box" -->    
	<div :class="[a,b,'box3']"></div>    
	<!-- div class="box box2 box3" -->    
	<div :class="{active:isActive}"></div>    
	<!-- div class -->    
	<div :class="{active:1<2}"></div>    
	<!-- div class="active" -->    
	<div :class="[a,b,'box3',{active:1==1}]"></div>    
	<!-- div class="box box2 box3 active" -->  
</div>

Vue中的style

例1

const vm = new Vue({      
	el: '#app',      
	data: {        
		a: {          
			width: '100px',          
			height: '100px',          
			background: 'red'        
		}      
	}    
})

<div id="app">    
	<div :style="a"></div>  
</div>

例2

const vm = new Vue({      
	el: '#app'    
})

<div id="app">    
	<div :style="{width:100+100+'px',height:100+50+'px',background:'blue'}"></div>  
</div>