在VUE style中使用data中的變量的方法
最近項目中的公共組件，在復用的時候，針對不同的場景，需要不斷變更CSS里樣式的值，而且已經有了全局的公共組件樣式了
如果用vue傳統(tǒng)的動態(tài)綁定class和style的方式去修改樣式（文末會提到），需要額外寫很多變量和模塊class，那如果我的樣式的值，可以從父組件，傳到子組件，子組件根據傳入值去渲染對應樣式的值，其實就是要再style中使用data和props中的變量，這要怎么做呢？
其實很簡單，只需要三步，大家來看：
1、HTML結構
<Upload ref="upload" :show-upload-list="false" :before-upload="handleBeforeUpload" :disabled="disabled" :max-size="maxSize" action >
2、作用區(qū)域范圍內設置“CSS變量”
<style lang="less" scoped>
.info-img-wrap {
--textAlignPosition: center;
/deep/ .ivu-upload {
text-align: var(--textAlignPosition);
}
}
<style/>
3、在JS中通過setProperty()方法修改“--textAlignPosition”的值，從而間接改變對應子元素的（text-align）文本對齊方式
mounted() {
this.$nextTick(function () {
this.$refs.upload.$el.style.setProperty(
'--textAlignPosition',
this.textAlign
);
});
}
這要就完成了。
下面再復習一下vue中修改樣式還有另外兩種方法，1是動態(tài)修改class，2是動態(tài)修改style
1、vue中可以通過對象語法和數組語法來修改class
對象語法
html
<div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>
js
data: {
isActive: false,
hasError: true
}
數組語法
html
<div v-bind:class="\[isActive ? activeClass : '', errorClass\]"></div>
js
data: {
isActive: false,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}
只需要動態(tài)改變isActive和hasError的值，就可以實現div的綁定不同的class和去掉綁定
2、vue中可以通過對象語法和數組語法來修改style
對象語法
html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
js
data: {
activeColor: 'red',
fontSize: 30
}
數組語法
html
<div v-bind:style="\[styleColor, styleSize\]"></div>
js
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
只要改變data中的變量styleColor和styleSize，就可以動態(tài)修改div的style了。
到此這篇關于在VUE style中使用data中的變量的方法的文章就介紹到這了,更多相關VUE style使用data變量內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了詳解vue+css3做交互特效的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了 vue 動態(tài)組件component ，vue提供了一個內置的<component>,專門用來實現動態(tài)組件的渲染，這個標簽就相當于一個占位符，需要使用is屬性指定綁定的組件，想了解更多詳細內容的小伙伴請參考下面文章的具體內容2021-11-11
這篇文章主要介紹了nuxt中刷新頁面后防止store值丟失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在我們用vue時,我們經常用到一個方法是this.$nextTick,相信你也用過,我常用的場景是在進行獲取數據后,需要對新視圖進行下一步操作或者其他操作時,發(fā)現獲取不到dom,這篇文章主要給大家介紹了關于$nextTick的相關資料,需要的朋友可以參考下2021-07-07
vue2.0 可折疊列表 v-for循環(huán)展示的實例
今天小編大家分享一篇vue2.0 可折疊列表 v-for循環(huán)展示的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue.js this.$router.push獲取不到params參數問題
這篇文章主要介紹了vue.js this.$router.push獲取不到params參數問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了vue時間選擇控件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了基于axios請求封裝的vue應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
Vue3?Axios攔截器封裝成request文件的示例詳解
這篇文章主要介紹了Vue3?Axios攔截器封裝成request文件,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中如何添加百度統(tǒng)計代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12