vue學習筆記【四、class與style的使用】

1、class的使用：

樣式類可以是字符串、json對象、數組。一般情況下使用數組。

2、style的使用：

使用style可以設置修改樣式。

 

具體使用方法如代碼所示。

<template>
	<div>
		<h3>class的使用</h3>
		<div :class="first">樣式類可以是字符串</div>
		<div :class="{one:true, two:true}">樣式類可以是對象</div>
		<div :class="['one','two']">樣式類可以是數組</div>
		<div :class="[first,sec]">樣式類可以是數組</div>
		
		<p>=======================================================</p>
		
		<h3>style的使用</h3>
		<div 
			style="width: 300px;height: 100px;border: 1px solid red;margin: 0 auto;" 
			:style="{backgroundColor:bgcolor,fontSize:fSize}">style</div>
	</div>
</template>

<script>
	export default{
		name:"ClassAndStyle",
		data(){
			return {
				first:'one',
				sec:'two',
				bgcolor:'blue',
				fSize:'28px'
			}
		}
	}
</script>

<style scoped>
	.one{
		color: red;
	}
	
	.two{
		color: green;
		background: yellow;
	}
</style>