vue Style 与 Class 样式绑定
1. class
// 对象形式 <div v-bind:class="{ active: isActive }"></div> // 多个class样式 active是css中定义的class类名,'text-danger' 是样式,要加引号 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> // data中 data: { isActive: true, hasError: false } // 数组形式 <div v-bind:class="[activeClass, errorClass]"></div> 或三元表达式 <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
2. style样式
// 对象 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> // data中 data: { activeColor: 'red', fontSize: 30 } // 直接绑定样式对象 <div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } } // 数组 <div v-bind:style="[baseStyles, overridingStyles]"></div>