1. 不好的做法: 將style屬性看做一個(gè)普通的字符串屬性進(jìn)行綁定。

a. <元素 :style="變量">

data:{

變量: "css屬性:值; css屬性:值;..."

}

b. 問(wèn)題: 極其不便于只操作其中某一個(gè)css屬性

2. 好的辦法: 將style看做一個(gè)對(duì)象來(lái)綁定。每個(gè)css屬性都是對(duì)象中的一個(gè)屬性。

結(jié)果: "css屬性1:屬性值1; css屬性2:屬性值2;..."

↑ ↑ ↑ ↑

a. <元素 :style="{ css屬性1: 變量1, css屬性2: 變量2, ... }"

data:{

變量1:"屬性值1",

變量2:"屬性值2",

... ...

}

b. 優(yōu)點(diǎn): 輕易只修改其中某一個(gè)css屬性值，而不影響其他屬性值

c. 問(wèn)題: 如果多個(gè)css屬性的變量零散的保存在data中，如果多個(gè)元素都需要控制內(nèi)聯(lián)樣式，就極容易發(fā)生沖突。

d. 示例: 控制一個(gè)飛機(jī)的飛行

1_style.html

3. 更好的解決辦法:企業(yè)網(wǎng)站設(shè)計(jì)，品牌網(wǎng)站建設(shè),將每個(gè)元素所需的所有內(nèi)聯(lián)樣式變量，集中保存在data中的一個(gè)對(duì)象里。

a. <元素1 :style="變量名1">

<元素2 :style="變量名2">

data:{

變量名1:{

css屬性:值,

... : ...

},

變量名2:{

css屬性:值,

... : ...

}

b. 優(yōu)點(diǎn): 避免不同元素間相同css屬性的沖突

c. 示例: 控制兩個(gè)飛機(jī)的飛行

1_style2.html

4. 問(wèn)題: 如果元素上有些內(nèi)聯(lián)css屬性是固定不變的，而有些css屬性是可能發(fā)生變化的？

5.解決:對(duì)于網(wǎng)站開發(fā)而言，其實(shí)在一個(gè)元素上寫死的固定不變的style和動(dòng)態(tài)變化的:style是可以并存的。最后運(yùn)行的結(jié)果是，:style動(dòng)態(tài)生成的css屬性會(huì)和style中固定不變的屬性合并為最終應(yīng)用到元素上的style屬性。

結(jié)果: style="固定不變的css屬性:值; 變化的css屬性: 值; ..."

↑ ↑

<元素 style="固定不變的css屬性:值" :style="變量"

data:{

變量:{

變化的css屬性: 值

}

}

比如: <img style="left:50%" :style="img1Style" src="img/p3.png">

data:{

img1Style:{

marginLeft:"-200px",

bottom:"25px",

}

}

6問(wèn)題: DOM中經(jīng)常批量修改一個(gè)元素的多個(gè)css屬性，如果單個(gè)修改每個(gè)css屬性值，代碼會(huì)很繁瑣

7.解決: 用class來(lái)代替單獨(dú)修改每個(gè)css屬性。