在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
<div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>
js
data: {
isActive: false,
hasError: true
}
數(shù)組語(yǔ)法
html
<div v-bind:class="\[isActive ? activeClass : '', errorClass\]"></div>
js
data: {
isActive: false,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}
只需要?jiǎng)討B(tài)改變isActive和hasError的值，就可以實(shí)現(xiàn)div的綁定不同的class和去掉綁定
2、vue中可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法來(lái)修改style
對(duì)象語(yǔ)法
html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
js
data: {
activeColor: 'red',
fontSize: 30
}
數(shù)組語(yǔ)法
html
<div v-bind:style="\[styleColor, styleSize\]"></div>
js
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
只要改變data中的變量styleColor和styleSize，就可以動(dòng)態(tài)修改div的style了。
到此這篇關(guān)于在VUE style中使用data中的變量的方法的文章就介紹到這了,更多相關(guān)VUE style使用data變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue3如何實(shí)現(xiàn)在style中使用響應(yīng)式變量
- Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
- Vue3中使用styled-components的實(shí)現(xiàn)
- 在 Vue3 中如何使用 styled-components
- Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問(wèn)題解決
- vue使用xlsx庫(kù)和xlsx-style庫(kù)導(dǎo)入導(dǎo)出excel、設(shè)置單元格背景色、文字居中、合并單元格、設(shè)置列寬
- 使用Vue綁定class和style樣式的幾種寫(xiě)法總結(jié)
- vue如何在style標(biāo)簽中使用變量(數(shù)據(jù))詳解
- 在vue中:style 的使用方式匯總
相關(guān)文章
本篇文章主要介紹了詳解vue+css3做交互特效的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了 vue 動(dòng)態(tài)組件component ，vue提供了一個(gè)內(nèi)置的<component>,專門(mén)用來(lái)實(shí)現(xiàn)動(dòng)態(tài)組件的渲染，這個(gè)標(biāo)簽就相當(dāng)于一個(gè)占位符，需要使用is屬性指定綁定的組件，想了解更多詳細(xì)內(nèi)容的小伙伴請(qǐng)參考下面文章的具體內(nèi)容2021-11-11
nuxt中刷新頁(yè)面后防止store值丟失問(wèn)題
這篇文章主要介紹了nuxt中刷新頁(yè)面后防止store值丟失問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在我們用vue時(shí),我們經(jīng)常用到一個(gè)方法是this.$nextTick,相信你也用過(guò),我常用的場(chǎng)景是在進(jìn)行獲取數(shù)據(jù)后,需要對(duì)新視圖進(jìn)行下一步操作或者其他操作時(shí),發(fā)現(xiàn)獲取不到dom,這篇文章主要給大家介紹了關(guān)于$nextTick的相關(guān)資料,需要的朋友可以參考下2021-07-07
vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例
今天小編大家分享一篇vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue.js this.$router.push獲取不到params參數(shù)問(wèn)題
這篇文章主要介紹了vue.js this.$router.push獲取不到params參數(shù)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue時(shí)間選擇控件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于axios請(qǐng)求封裝的vue應(yīng)用實(shí)例代碼
這篇文章主要給大家介紹了基于axios請(qǐng)求封裝的vue應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Vue3?Axios攔截器封裝成request文件的示例詳解
這篇文章主要介紹了Vue3?Axios攔截器封裝成request文件,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中如何添加百度統(tǒng)計(jì)代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12