<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue的學習</title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><!-- test是一個普通的css的樣式 --><!-- v-bind對class樣式進行綁定，通過isActive來判斷是否對樣式的修飾 --><!-- v-bind:class="{active:isActive,gree:isGree}" --><!-- 第二種方式，也可以通過元組里面調用三目運算的方式進行修飾 --><div class="test" v-bind:class="[isActive?'active':'',isGree?'gree':'']" style="width: 200px;height: 200px;text-align: center;line-height: 200px;">hi Vue</div><br /><!-- 通過v-bin綁定style樣式 --><div :style="{color:color,fontSize:fontsize,background:isRed?'red':''}">hello Ryan</div></div><script type="text/javascript">var vm = new Vue({el: "#app",data: {isActive: true,isGree: true,color: "blue",fontsize: '30px',isRed: false,}});</script><style type="text/css">.test {font-size: 30px;}.active {background: red;}.gree {color: green;}</style></body>
</html>本節對class與style的綁定內容就學習完畢了！！！
