## Class和Style的綁定 ### 綁定Class 1.對象語法 ~~~ <div v-bind:class="{ active: isActive }"></div> ~~~ ~~~ <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> ~~~ ~~~ data: { isActive: true, hasError: false } ~~~ 渲染出來的結果 ~~~ <div class="static active"></div> ~~~ 2.數組方法 ~~~ <div v-bind:class="[activeClass, errorClass]"></div> ~~~ ~~~ data: { activeClass: 'active', errorClass: 'text-danger' } ~~~ 渲染出來的結果 ~~~ <div class="active text-danger"></div> ~~~ ### 綁定Style 1.對象語法 ~~~ <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> ~~~ ~~~ data: { activeColor: 'red', fontSize: 30 } ~~~ ~~~ <div v-bind:style="styleObject"></div> ~~~ ~~~ data: { styleObject: { color: 'red', fontSize: '13px' } } ~~~ ~~~ <div style="color:red;font-size:13px"></div> ~~~ 2.數組語法 ~~~ <div v-bind:style="[baseStyles, overridingStyles]"></div> ~~~ ### 課后習題 1.采用vue實現頁面顯示age的值，默認為18，將下面的dom綁定不同的class,要求當age的值改變為在0-100的時候顯示為綠色，超過100或者小于0的時候顯示為紅色。 ~~~ <div>{{age}}</div> <style> .red { color:red; } .green { color:green; } </style> ~~~ 2.將下面的樣式用vue style綁定的方式改寫。 ~~~ <div style="color:red;background:black;font-size:12px"></div> ~~~