Vue動態(tài)改變css樣式的3種方法總結(jié)
前言
在網(wǎng)頁開發(fā)中，我們經(jīng)常會遇到動態(tài)的改變某個元素樣式的需求，在vue里如何實現(xiàn)呢？官網(wǎng)上其實寫的很詳細了，對象語法，數(shù)組語法等。我自己總結(jié)了在開發(fā)中，個人用的比較多的三種方式
1.class，三元表達式
根據(jù)三元表達式來動態(tài)的在兩種樣式間切換
:class="[occupation === '請選擇' ? 'lh60' : 'lh61']"
css:
lh60: {
color:blue;
}
lh61: {
color:red;
}
2.:style=“xxxxx”,這里xxx可以是個函數(shù)，也可以是個計算屬性
《1》 <!--HTML部分 -->
<div class="square" :style="{'background-color':isChange?'blue':'red',
'color':isChange?'white':'black'}">測試</div>
isChange是一個變量
注意!CSS property 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，要用引號括起來) 所以以下同等效果，同時三目運算符后的字符串也能換成data中的數(shù)據(jù)。
<!--HTML部分 -->
<div class="square" :style="{backgroundColor:isChange?color_active:color_disactive,
color:isChange?textColor_active:textColor_disactive}">測試</div>
vscode截圖
//date部分
data:{
isChange:false,
color_active:'blue',
color_disactive:'red',
textColor_active:'white',
textColor_disactive:'black'
}
這個是函數(shù)的形式
《2》 style="handleStyle(second)”
......
handleStyle(deg) {
return { transform: "rotate(" + deg + "deg)" };
},
計算屬性：
:style=“imgStyle”
......
computed: {
imgStyle() {
return {
padding: this.spacing + "px",
};
},
}
這兩種方式很像，區(qū)別在于，使用方法的時候，視圖刷新，函數(shù)就會重新計算一遍值。計算屬性，會把以前的值緩存起來，沒有變化，就不會計算，直接返回以前的值
總結(jié)
到此這篇關(guān)于Vue動態(tài)改變css樣式的3種方法總結(jié)的文章就介紹到這了,更多相關(guān)Vue動態(tài)改變css樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題
這篇文章主要介紹了vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue報錯：Uncaught TypeError: Cannot assign to read only propert
這篇文章主要給大家介紹了關(guān)于Vue報錯：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解決方法，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-06-06
前端開發(fā)指南之vue-grid-layout的使用實例
vue-grid-layout是一個vue柵格拖動布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue配置請求本地json數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
uniapp項目國際化標(biāo)準(zhǔn)的配置與實現(xiàn)
UniApp是一種基于Vue.js的跨平臺開發(fā)框架,可以快速地開發(fā)同時運行在多個平臺的應(yīng)用程序,這篇文章主要介紹了uniapp項目國際化標(biāo)準(zhǔn)的配置與實現(xiàn),需要的朋友可以參考下2023-11-11
vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在現(xiàn)代 Web 開發(fā)中,定時刷新頁面或定時更新數(shù)據(jù)是一種常見的需求,尤其是在需要與服務(wù)器進行定時通信或者展示實時數(shù)據(jù)的場景下,Vue.js 提供了簡單而有效的方法來實現(xiàn)定時刷新和自動更新,本文將介紹幾種常見的定時刷新方式、適用場景、優(yōu)缺點以及性能考慮2024-11-11
vue級聯(lián)選擇器的getCheckedNodes使用方式
這篇文章主要介紹了vue級聯(lián)選擇器的getCheckedNodes使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue CLI4.0 webpack配置屬性之productionSourceMap用法
這篇文章主要介紹了Vue CLI4.0 webpack配置屬性之productionSourceMap用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細介紹了vue3.0之Router的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03