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;

}