Vue.js（三）——样式的使用

1、在vue中使用class样式

1.1、数组

	<style>
		.red{
			color: #FF0000;
		}
		.thin{
			font-weight: 200;
		}
		.italic{
			font-style: italic;
		}
		.active{
			letter-spacing: 0.5em;
		}
	</style>
<h1 :class="['red','thin']">这是一个h1</h1>

1.2、数组中使用三元表达式

<h1 :class="['red','thin',isactive?'active':'']">这是一个h1</h1>

1.3、数组中嵌套对象

<h1 :class="['red','thin',{'active': isactive}]">这是一个h1</h1>

1.4、直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个h1</h1>

2、使用内联样式

2.1、直接在元素上通过:style的样式，书写对象

<h1 :style="{'color': 'red','font-size': '40px'}">这是一个h1</h1>

2.2、将样式对象定义到data中，并直接引用到：style中

• data上定义样式

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

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中

<h1 :style="h1StyleObj">这是一个h1</h1>

	<script>
			var app = new Vue({
				el: '#app' ,
				
				data: {							
					flag: true,
					classObj: {red:true, thin:true, active:true}
				},
				methods: {
				
				}
			})
		</script>

2.3、在：style中通过数组，引用多个data上的样式对象

• 在data上定义样式

data：{
h1StyleObj:{'color': 'red','font-size': '40px'},
h1StyleObj2:{fontstyle:'italic'}
}

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

<h1 :style="[h1StyleObj,h1StyleObj2]">这是一个h1</h1>