HTML中為元素綁定Class屬性與Style樣式
在實際開發(fā)中經(jīng)常會遇到動態(tài)操作元素樣式的需求。因此，vue 允許開發(fā)者通過 v-bind 屬性綁定指令，為元素動態(tài)綁定 class 屬性的值和行內(nèi)的 style 樣式。
1. 動態(tài)綁定 HTML 的 class
可以通過三元表達式，動態(tài)的為元素綁定 class 的類名。示例代碼如下：
<h3 class="thin" :class="isItalic?'italic'： ">MyDeep組件</h3><button @click="isItalic=!isItalic">Toggle Italic</button>data() {
?return { isItalic: true }}.thin{ // 字體變細
?font-weight:200;}.italic{ // 傾斜字體
?font-style: italic;}
2. 以數(shù)組語法綁定 HTML 的 class
如果元素需要動態(tài)綁定多個 class 的類名，此時可以使用數(shù)組的語法格式：
<h3 class="thin" :class="[isItalic ? 'italic' : '", isDelete ? 'delete' : '"]">
?MyDeep 組件</h3><button @click="isItalic=!isItalic">Toggle Italic</button><button @click="isDelete=!isDelete">Toggle Delete</button>data(){
?return {
? ?isItalic: true,
? ?isDelete: false,
?}}
3. 以對象語法綁定 HTML 的 class
使用數(shù)組語法動態(tài)綁定 class 會導(dǎo)致模板結(jié)構(gòu)臃腫的問題。此時可以使用對象語法進行簡化：
<h3 class="thin" :class="class0bj">MyDeep 組件</h3><button @click="class0bj.italic = !class0bj.italic">Toggle Italic</button><button @click="class0bj.delete = !class0bj.delete">Toggle Delete</button>data(){
?return {
? ?classobj：{ //對象中，屬性名是class 類名，值是布爾值
? ? ?italic: true,
? ? ?delete: false,
? ?}
? }}
4. 以對象語法綁定內(nèi)聯(lián)的 style
:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：
<div :style="{color: active, fontSize: fsize + 'px','background-color': bgcolor}">黑馬程序員</div><button @click="fsize += 1">字號 +1</button><button @click="fsize -= 1">字號 -1</button>data() {
?return {
? ?active: 'red',
? ?fsize: 30,
? ?bgcolor:'pink',
?}}
