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