vue.js绑定样式

绑定 样式 ：

<div id="app">
<p style="font-weight:600">--------绑定样式：class--------</p>
		 <div>
		 <span >绑定字符串：</span>
		 <br><br>
		 <div v-bind:class="{shadow}">
			 1.将绑定的class设置为组件中某个属性的值，只用绑定该属性即可
		</div><br>
		 <div v-bind:class="{'textDecoration': textDecoration}">
			 2-1.以键值对的形式绑定：键为‘类名’（类名在引号里面）,值为布尔值
		</div>
		 <div v-bind:class="{active: active}">
			 2-2.以键值对的形式绑定：键直接是类名，值为布尔值
		</div>		 
		 <br>	
		
		<div v-bind:class="{textDecoration: textDecoration, active: active}">
			3.同时绑定多个，以逗号隔开
		</div><br><br>
		<span>绑定数组：</span>	
		<br><br>					
		<div v-bind:class="[shadow,textdecor,active ? activeTest : '']">
			 直接将一个数组绑定到class，可同时绑定多个，数组的变量（可以是表达式）是组件中的属性，可将样式绑定到属性。
		</div>
		<br><br>
		 <span >
			 绑定对象：
		</span><br><br>
		 <div v-bind:class="fontObject">
			 首先在组件的属性中声明一个要绑定的对象(该对象中的属性是 class 类型的属性而不是具体样式属性，区别于style绑定对象)，直接在元素中绑定即可
		 </div>
			
		 <p style="font-weight:600">--------绑定样式：style--------</p>
		 <div v-bind:style="{ fontSize: fontSize , fontStyle: fontStyle }">
			 1.直接在元素的style中设置各个属性,属性值需在组件属性中预先定义好
		</div>
		 <div style="color:coral;font-weight:600;font-size:14px">
			注意: vue在绑定内联样式时，要绑定的属性值一定要写为：首字母小写，其它单词首字母大写的形式
		</div>
		 <br>
		 <div v-bind:style="styleObject1"> 
			 2.直接绑定到样式对象
		</div>
		<br>
		<div v-bind:style="[styleObject1,styleObject2]">
			3.以数组的形式同时绑定多个对象
		</div>
</div>

<script> 
	var vm = new Vue({
	  el: "#app",	
	  data: {
	     
			 //样式
			 shadow: 'shadow',
			 active: true,
			 myFirstFamily: true,
			 textDecoration: true,
			 textdecor: 'textDecoration',
			 activeTest: 'active',
			 fontObject: {   
				active: true,
				textDecoration: true,
			 },

			 fontcolor: 'red',
			 fontStyle: 'italic',
			 fontSize: '20px',

			 styleObject1: {
				color: 'red',
				fontSize: '20px'				
			 },

			 styleObject2: {
				 fontStyle: 'oblique'
			 }

		},
		
	});

</script>

绑定 class 时，操作的基本单位是 class

绑定style时，操作的基本单位是 样式属性