vuejs基礎-style樣式

• 2019 年 10 月 10 日
• 筆記

　　class樣式和內聯style樣式

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<script type="text/javascript" src="vue.min.js" ></script>  		<style>  			.red{  				color:red;  			}    			.thin{  				font-weight:200;  			}    			.italic{  				font-style:italic;  			}    			.active{  				letter-spacing: 0.5em;  			}  		</style>  	</head>  	<body>  		<div id="app">  			<!--<h1 class="red thin">這是一個測試標籤，看它的變化</h1>-->    			<!--<h1 :class="['red','thin','italic']">這是一個測試標籤，看它的變化</h1>-->    			<!--<h1 :class="['red','thin',flag? 'active': '']">這是一個測試標籤，看它的變化</h1>-->    			<!--<h1 :class="['red','thin',{active:flag}]">這是一個測試標籤，看它的變化</h1>-->    			<!--<h1 :class="{red:true,thin:false,active:flag}">這是一個測試標籤，看它的變化</h1>-->    			<h1 style="color:'red'; 'font-weight':'100px'">這是一個測試標籤，看它的變化</h1>    			<!--<h1 :style="['classobj','classobj2']">這是一個測試標籤，看它的變化</h1>    			<h1 :style="{color:'red', 'font-weight':'100px'}">這是一個測試標籤，看它的變化</h1>    			<h1 :style="{color:'red', 'font-weight':'100px'}">這是一個測試標籤，看它的變化</h1>-->  		</div>  	</body>    	<script>  		new Vue({  			el:"#app",  			data:{  				flag:true,  				classobj:{red:true,thin:false,active:true},  				classobj2:{red:false,thin:false,active:true}  			},  			methods:{}  		});  	</script>  </html>