Vue学习（样式绑定）

样式绑定
通过Vue.js绑定样式可以根据自己的需求来控制样式是否显示，显示什么样式，前提使控制样式表存在的样式。使用v-bind:class=""来绑定要显示的class属性，class中的值也可以是一个数组。
例：
书写样式表

<style>
	.pRed{
		color: red;
	}
	.pSize{
		font-size: 40px;
	}
</style>

控制显示样式的Vue对象

var vm = new Vue({
	el:"#app",
	data:{
		red:"pRed"	
	}
	
});

显示区域

<div id="app">
	<!--通过字符串的方式进行样式绑定-->
	<p v-bind:class="red">红色文本</p>	
</div>

这里要注意在浏览器Console控制样式是否显示时，不管是true还是false，都会将样式取消。
同时添加多个样式
控制样式Vue

var vm = new Vue({
	el:"#app",
	data:{
		// 字符串样式
		isRed:true,			// 是否红色
		isSize:true		// 字体变大		
	}	
});

显示

<div id="app">
	<!--通过字符串的方式进行样式绑定-->
	<p v-bind:class="{pRed:isRed,pSize:isSize}">放大的红色文本</p>
</div>

将要显示的样式显示的设置为true，在绑定多个样式时一定要加{} 将要显示的样式包围，采用键值对的方式写入大括号。在Console不让样式显示时只需要让样式的值为false就可以了。
可以将要添加的样式放到数组中，在设置样式时，将样的数组添加就可以了

var vm = new Vue({
	el:"#app",
	data:{			
	change:[			
		//变化
		{pRed:true},
		{pSize:true}
	}	
});

显示

<div id="app">
	<!--通过字符串的方式进行样式绑定-->
	<p v-bind:class="change">放大的红色文本</p>
</div>

控制数组中样式显示的语法

Vue对象.数组名[控制样式的索引值].控制样式的名称=true/false

通过对象来对显示区域进行样式控制

var vm = new Vue({
	el:"#app",
	data:{
		rs:{
			pRed:true,			// 是否红色
			pSize:true			// 字体变大
		}	
	}	
});

显示

<div id="app">
	<!--通过字符串的方式进行样式绑定-->
	<p v-bind:class="rs">第三个文本 </p>    
 </div>

控制对象中样式显示的语法

vue对象.对象名.控制样式的字段=true/false