VUE(3) vue中使用样式class，style

使用class样式

	
		
		
		
		
		
	
	
		

			
			
			
			
			 
			 
大大大大大大大大大
		
		
	

1.使用数组

直接传递数组，注意：这里的class需要使用v-bind做数据绑定

大大大大大大大大大
 

2.在数组中使用三元表达式

大大大大大大大大大

3.数组中嵌套对象

在数组中使用对象 代替三元表达式

大大大大大大大大大

4.直接使用对象

再为class使用v-bind 绑定 对象的时候，对象的属性是类名，由于对象的属性可带引号也可不带，所以我没写，属性的值是一个标识符

大大大大大大大大大

还可以 在data里边创建一个对象

• 在data上定义样式：

data:{
	objectclass : { red:true,italic:true,italic:false}
}

• 在元素中，通过属性绑定的类，绑定到元素中

 
大大大大大大大大大

使用内联样式

1.直接在元素上通过:style 的形式，书写样式对象

注意：像font-size这样中间有-的，加引号

 这是一个h1

2.将样式对象，定义到data中，并直接引用到:style中

• 在data上定义样式：

data:{
	h1styleobj : {color:'red','font-size':'40px','font-weight':'200'}
}

• 在元素中，通过属性绑定的形式，绑定到元素中

 
这是一个h1

在:style中通过数组，引用多个data上的央视对象

• 在data上定义样式

data : {
	h1styleobj:{color:red},
	h1styleobj2:{'font-size':'40px'}
}

• 在元素中，通过属性绑定的形式，绑定到元素中

这是一个h1