>[success] # Vue 样式的使用 ~~~ 1.class 样式的使用 2.style 内联样式的使用 ~~~ >[danger] ##### class ~~~ 1.传统使用规定好class名字即可<h1 class="red thin">传统使用</h1> 2.直接传递一个数组,下面数组中的值都是样式表中声明的class类名，注意： 这 里的 class 需要使用 v-bind 做数据绑定 ： <h1 :class="['thin', 'italic']">直接传数组</h1> 3.在数组中使用三元表达式： <h1 :class="['thin', 'italic', flag?'active':'']">在数组中使用三元表达式</h1> 4.在数组中使用 对象来代替三元表达式，提高代码的可读性 : <h1 :class="['thin', 'italic', {'active':flag} ]">在vue实例data中定义flag</h1> 5.放入vue实例data中声明 <h1 :class="classObj">放入vue实例data中声明</h1> data: { flag: true, classObj: { red: true, thin: true, italic: false, active: false } }, ~~~ >[danger] ##### syle ~~~ 1.使用vue实例data中 <h1 :style="[ styleObj1, styleObj2 ]">vue--data中</h1> data: { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }, 2.使用对象但是当font-size 要写成fontSize： <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> ~~~