1. 程式人生 > >Vue動態新增css

Vue動態新增css

第一步:在元素中繫結動態樣式

1.新增單個樣式

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

2.新增多個樣式

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

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

data: {

    addInviteHeight1: '', // 彈框的高度

    addInviteHeight2: '', // 彈框的高度

    lightBlue: 'lightBlue',  // 粉色字是css中定義的樣式名

}

第三步:在css中寫樣式

.addInviteHeight1 {

height: 52.5rem;

}

.addInviteHeight1 {

height: 48rem;

}

.lightBlue {

background-color: #6e9dd3;

}