Vue動態(tài)改變css樣式的3種方法總結(jié)
更新時間：2023年11月01日 11:16:07 作者：肖邦的交響樂
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)改變css樣式的3種方法,在Vue.js中我們經(jīng)常需要根據(jù)特定的條件或事件來動態(tài)地修改CSS樣式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
前言
在網(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?CLI項目中,組件間的屬性傳值是一個常見的需求,本文為大家整理了一些常用的傳值方法和規(guī)范以及相應(yīng)的代碼演示和解說,感興趣的小伙伴可以跟隨小編一起學習一下2025-05-05
這篇文章主要介紹了vue 右鍵菜單插件 簡單、可擴展、樣式自定義的右鍵菜單，本文給大家分享個例子，給大家及時的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
最近忙著開發(fā)自己的開發(fā)腳手架,在做代碼生成器的時候,有個預(yù)覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關(guān)于vue3引入highlight.js進行代碼高亮的相關(guān)資料,需要的朋友可以參考下2022-04-04
下面小編就為大家分享一篇vue axios 在頁面切換時中斷請求方法 ajax，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實用流程,具有一定的參考價值,感興趣的可以了解一下2023-10-10
vue 查看dist文件里的結(jié)構(gòu)(多種方式)
本文通過三種方式給大家介紹了vue 查看dist文件里的結(jié)構(gòu),非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue store之狀態(tài)管理模式的詳細介紹，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
vue框架編輯接口頁面下拉級聯(lián)選擇并綁定接口所屬模塊
這篇文章主要為大家介紹了vue框架編輯接口頁面實現(xiàn)下拉級聯(lián)選擇以及綁定接口所屬模塊，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)回到頂部動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
基于Vue2的獨立構(gòu)建與運行時構(gòu)建的差別(詳解)
下面小編就為大家分享一篇基于Vue2的獨立構(gòu)建與運行時構(gòu)建的差別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12