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>