Vue—Class与style绑定

  1. class、style都属于attribute,所以通过v-bind来绑定
  2. 针对class、style属性，v-bind可以通过对象或数组去指定

绑定Html Class

组件待续。。。

	<body>
		<div id="app4">
			<!-- 通过对象 ,要灵活配置采用三元表达式-->
			<div  class="test" :class="{'active':isAtive,test:true,'green':isGreen}">	
			<span>Hello Vue</span>
			</div>
			
			<!-- 通过数组,要灵活配置采用三元表达式-->
			<div id="app4" class="test" v-bind:class="['active',test,isGreen?'green':'']">	
			   <span>Hi Vue</span>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app4",
				data:{
					isAtive:true,
					isGreen:true,
					test:'test'
				}
			});
		</script>
	<style>
	.test{font-size:50px;}
	.green{color:#00FF00;}
	.active{background:#FF0000;}
	</style> 
	</body>

绑定Html Style

	<body>
			<div id="app4">
	            <!-- 采用单一变量（把所有的style封装到一个变量里）,单一变量记得定义成小写 -->
	            <div v-bind:style="newstyle"> 
					你好 vue
				</div> 
				<!-- 采用对象，也可用三目表达式灵活配置 -->
				<div v-bind:style="{color:Color, fontSize:size, background: isRed ? '#FF0000' : ''}"> 
					hi vue
				</div> 
				<!-- 采用数组 -->
				<h2 :style="[baseStyle,baseStyle1]">hi vue</h2>
			</div>
	
			<script type="text/javascript">
				var vm = new Vue({
					el:"#app4",
					data:{
						Color : "#FFFFFF",
						size : '50px',
						isRed : true,
						baseStyle: {backgroundColor: 'red'},
						baseStyle1: {fontSize: '100px'},
	                    newstyle:{
	                      color : 'blue',
	                      fontSize:'50px'
	                    }
					}
				});
			</script>
		</body>