」;2、在data中定義資料物件;3、在css中寫樣式。"/> 」;2、在data中定義資料物件;3、在css中寫樣式。">

首頁  >  文章  >  web前端  >  vue如何動態增加css

vue如何動態增加css

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-07-26 11:55:2212729瀏覽

vue如何動態增加css的方法是:1、在元素中綁定動態樣式,語法「b52f20da03af8ce33ad4177376de66ac」;2、在data中定義資料物件;3、在css中寫樣式。

本教學操作環境:windows7系統、vue2.9.6版、Dell G3電腦。

第一步:在元素中綁定動態樣式

1.新增單一樣式

<div class="addInvTitle" :class="lightBlue">

2.新增多個樣式

<div id="addInvite" class="addInvite" :class="[addInviteHeight1, addInviteHeight2]">

第二步驟:data中定義資料物件

data: {
    addInviteHeight1: &#39;&#39;, // 弹框的高度
    addInviteHeight2: &#39;&#39;, // 弹框的高度
    lightBlue: &#39;lightBlue&#39;,  // lightBlue是css中定义的样式名
}

第三步:在css中寫樣式

.addInviteHeight1 {
height: 52.5rem;
}
.addInviteHeight1 {
height: 48rem;
}
.lightBlue {
background-color: #6e9dd3;
}

【推薦學習:javascript高階教學

以上是vue如何動態增加css的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn