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