在VUE style中使用data中的變量的方法
最近項目中的公共組件，在復用的時候，針對不同的場景，需要不斷變更CSS里樣式的值，而且已經(jīng)有了全局的公共組件樣式了
如果用vue傳統(tǒng)的動態(tài)綁定class和style的方式去修改樣式（文末會提到），需要額外寫很多變量和模塊class，那如果我的樣式的值，可以從父組件，傳到子組件，子組件根據(jù)傳入值去渲染對應樣式的值，其實就是要再style中使用data和props中的變量，這要怎么做呢？
其實很簡單，只需要三步，大家來看：
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)設置“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中可以通過對象語法和數(shù)組語法來修改class
對象語法
html
<div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>
js
data: {
isActive: false,
hasError: true
}
數(shù)組語法
html
<div v-bind:class="\[isActive ? activeClass : '', errorClass\]"></div>
js
data: {
isActive: false,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}
只需要動態(tài)改變isActive和hasError的值，就可以實現(xiàn)div的綁定不同的class和去掉綁定
2、vue中可以通過對象語法和數(shù)組語法來修改style
對象語法
html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
js
data: {
activeColor: 'red',
fontSize: 30
}
數(shù)組語法
html
<div v-bind:style="\[styleColor, styleSize\]"></div>
js
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
只要改變data中的變量styleColor和styleSize，就可以動態(tài)修改div的style了。
到此這篇關(guān)于在VUE style中使用data中的變量的方法的文章就介紹到這了,更多相關(guān)VUE style使用data變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue3如何實現(xiàn)在style中使用響應式變量
- Vue3如何利用xlsx、xlsx-js-style導出Excel表格使用(適合新手)
- Vue3中使用styled-components的實現(xiàn)
- 在 Vue3 中如何使用 styled-components
- Vue使用xlsx和xlsx-style導出表格出現(xiàn)部分樣式缺失的問題解決
- vue使用xlsx庫和xlsx-style庫導入導出excel、設置單元格背景色、文字居中、合并單元格、設置列寬
- 使用Vue綁定class和style樣式的幾種寫法總結(jié)
- vue如何在style標簽中使用變量(數(shù)據(jù))詳解
- 在vue中:style 的使用方式匯總
相關(guān)文章
這篇文章主要介紹了Vue實現(xiàn)雙向綁定的方法，了解vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue?3.0?v-for中的Ref數(shù)組用法小結(jié)
在?Vue?2?中,在?v-for?里使用的?ref?attribute會用ref?數(shù)組填充相應的?$refs?property,本文給大家介紹Vue?3.0?v-for中的Ref數(shù)組的相關(guān)知識,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹的是如何用Vue做一個簡單的隨機點名冊，主要是做個簡單的點名器，不做樣式,需要的朋友可以參考一下，希望對你有所幫助2021-12-12
這篇文章主要為大家分享了vue2.0構(gòu)建單頁應用最佳實戰(zhàn)案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了vue列表單項展開收縮功能之this.$refs的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了教你如何編寫Vue.js的單元測試的方法，介紹了簡單的單元測試，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了學習 Vue.js 遇到的那些坑，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue中多個倒計時實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
下面小編就為大家分享一篇vue2.0 自定義 餅狀圖 (Echarts)組件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue實現(xiàn)學生錄入系統(tǒng)之添加刪除功能
本文給大家?guī)硪粋€小案例基于vue實現(xiàn)學生錄入系統(tǒng)功能，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07