在Vue中,可以使用綁定(binding)或計(jì)算屬性(computed properties)來(lái)動(dòng)態(tài)改變CSS屬性。
可以使用綁定來(lái)動(dòng)態(tài)改變CSS屬性,可以使用v-bind指令將元素的CSS類名綁定到一個(gè)變量上,當(dāng)變量值改變時(shí),元素的CSS類名也會(huì)自動(dòng)更新。
<div v-bind:class="dynamicClass">Hello World!</div>
new Vue({ data: { dynamicClass: 'my-class' } })
在這個(gè)例子中,div元素的CSS類名為'my-class',當(dāng)dynamicClass變量的值發(fā)生改變時(shí),div元素的CSS類名也會(huì)自動(dòng)更新為新的值。
也可以使用計(jì)算屬性來(lái)動(dòng)態(tài)改變CSS屬性,計(jì)算屬性允許你根據(jù)組件的數(shù)據(jù)動(dòng)態(tài)計(jì)算出一個(gè)值,并將這個(gè)值應(yīng)用到元素的CSS屬性上。
<div :style="computedStyle">Hello World!</div>
new Vue({ data: { dynamicClass: 'my-class' }, computed: { computedStyle: function() { return { color: 'red', fontSize: '20px' } } } })
在這個(gè)例子中,div元素的樣式根據(jù)computedStyle計(jì)算屬性的值來(lái)動(dòng)態(tài)改變,當(dāng)dynamicClass變量的值發(fā)生改變時(shí),computedStyle計(jì)算屬性的值也會(huì)自動(dòng)更新,從而更新div元素的樣式。