您好,登錄后才能下訂單哦!
小編給大家分享一下在VUE style中使用data中的變量的案例分析,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
最近項(xiàng)目中的公共組件,在復(fù)用的時(shí)候,針對(duì)不同的場(chǎng)景,需要不斷變更CSS里樣式的值,而且已經(jīng)有了全局的公共組件樣式了
如果用vue傳統(tǒng)的動(dòng)態(tài)綁定class和style的方式去修改樣式(文末會(huì)提到),需要額外寫(xiě)很多變量和模塊class,那如果我的樣式的值,可以從父組件,傳到子組件,子組件根據(jù)傳入值去渲染對(duì)應(yīng)樣式的值,其實(shí)就是要再style中使用data和props中的變量,這要怎么做呢?
其實(shí)很簡(jiǎn)單,只需要三步,大家來(lái)看:
1、HTML結(jié)構(gòu)
<Upload ref="upload" :show-upload-list="false" :before-upload="handleBeforeUpload" :disabled="disabled" :max-size="maxSize" action >
2、作用區(qū)域范圍內(nèi)設(shè)置“CSS變量”
<style lang="less" scoped> .info-img-wrap { --textAlignPosition: center; /deep/ .ivu-upload { text-align: var(--textAlignPosition); } } <style/>
3、在JS中通過(guò)setProperty()方法修改“--textAlignPosition”的值,從而間接改變對(duì)應(yīng)子元素的(text-align)文本對(duì)齊方式
mounted() { this.$nextTick(function () { this.$refs.upload.$el.style.setProperty( '--textAlignPosition', this.textAlign ); }); }
這要就完成了。
下面再?gòu)?fù)習(xí)一下vue中修改樣式還有另外兩種方法,1是動(dòng)態(tài)修改class,2是動(dòng)態(tài)修改style
1、vue中可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法來(lái)修改class
對(duì)象語(yǔ)法
html
<p v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></p>
js
data: { isActive: false, hasError: true }
數(shù)組語(yǔ)法
html
<p v-bind:class="\[isActive ? activeClass : '', errorClass\]"></p>
js
data: { isActive: false, hasError: true, activeClass: 'active', errorClass: 'text-danger' }
只需要?jiǎng)討B(tài)改變isActive和hasError的值,就可以實(shí)現(xiàn)p的綁定不同的class和去掉綁定
2、vue中可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法來(lái)修改style
對(duì)象語(yǔ)法
html
<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></p>
js
data: { activeColor: 'red', fontSize: 30 }
數(shù)組語(yǔ)法
html
<p v-bind:style="\[styleColor, styleSize\]"></p>
js
data: { styleColor: { color: 'red' }, styleSize:{ fontSize:'23px' } }
只要改變data中的變量styleColor和styleSize,就可以動(dòng)態(tài)修改p的style了。
看完了這篇文章,相信你對(duì)在VUE style中使用data中的變量的案例分析有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。