欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-04 19:33:49
...

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 会自动侦测并添加相应的前缀。