vue.js2.0学习(三)class与style的绑定

class与style绑定

通过v-bind指令来进行class与style的绑定

绑定HTML Class

1.对象语法

传给 v-bind:class 一个对象,以动态的切换class

<!-- 使用:v-bind:clas="{class名:条件}" -->
<!-- 例子: -->
<style>  
.active{  	
	background-color:red;  
}
</style>
<div v-bind:class="{active:isActive}"></div>
<script>
new Vue({	
	el:"#app",    
	data:{    	
		isActive:true    
	}
});
</script>

上面的例子中active这个class存在与否取决于数据属性isActive的布尔值

可以同时绑定多个class属性
例如:
<div v-bind:class="{ active: isActive,top:hasError }"></div>

对象语法绑定class的另一种写法:

绑定的数据对象写在vue实例中

<!--例如: --> 
 <div v-bind:class="classObject"></div>
 <script>	
 new Vue({    	
 	el:"#app",      	
 	data:{          
 		classObject: {            
 			active: true,           
  			'text-danger': false         
   		},       
    },    
});
</script>

通过计算属性监听值的变化(返回一个对象)

实例:

<!-- HTML-->
<div v-bind:class="classObject"></div>
<script>	
new Vue({    
	el:"#app",   
 	data:{      
 		isActive:true,
 		error:null    
 	},    
 	computed:{    	
 		classObject:function(){      		
 			return{            	
				active:this.isActive && !this.error, 
 				'text-danger':this.error && this.error.type === 'fatal'            
			}        
 		},    
 	}    
});
</script>

2.数组语法

将一个数组传递给 v-bind:class,以应用一个class列表

<!-- HTML-->
<div v-bind:class="[activeClass,errorClass]"></div>
<script>new Vue({    
	el:"#app",    
	data:{      
		activeClass:"active",      
		errorClass:"text-danger"    
	}    
});
</script>
<!-- 渲染结果 -->
<div class="active text-danger"></div>

根据条件切换列表中的class,可以使用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

3.用在组件上

当在一个组件上使用class属性时,这些样式会被添加到组件的根元素上面(根元素上已经存在的类不会被覆盖)

例子:

<!-- 使用组件 -->
<my-component class="test"></my-component>

<!-- 定义一个组件 -->
<script>
Vue.component("my-component",{	
	template:'<p class="bar foo">我的组件</p>'
}); 
new Vue({ 	
	el:"#app",
 });
 </script>
 
 <!-- 渲染结果 -->
 <p class="bar foo test">我的组件</p>

绑定内联样式

1. 对象语法

<!-- HTML -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
new Vue({    
	el:"#app",    
	data:{      
		activeColor:"red",      
		fontSize:30    
	}    
});
</script>

上面的例子可以直接绑定到一个样式对象,如下:

<!-- HTML -->
<div v-bind:style="styleObject"></div>
<script>
new Vue({    
	el:"#app",    
	data:{     
		styleObject: {        
			color: 'red',        
			fontSize: '13px'     
		}	    
	},    
});
</script>

2.数组语法

将多个样式对象应用到同一个元素上

<!-- HTML -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<script>
new Vue({    
	el:"#app",    
	data:{     
		baseStyles: {        
			color: 'red',        
			fontSize: '13px'     
		},      
		overridingStyles{          
			background-color:"black",      
		}    
},    
});
</script>

3.自动添加前缀

当v-bind:style使用需要添加浏览器引擎前缀的 CSS 属性时，如transform,Vue.js 会自动侦测并添加相应的前缀。