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