## 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> ~~~