How to dynamically add css in vue

How vue dynamically adds css is: 1. Bind dynamic styles to elements with the syntax "<div class="name" :class="css style name">"; 2. Define data objects in data; 3. Write styles in css.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, Dell G3 computer.

Step 1: Bind dynamic styles to elements

1. Add a single style

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

2. Add multiple styles

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

Second Step: Define data objects in data

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

Step three: Write styles in css

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

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to dynamically add css in vue. For more information, please follow other related articles on the PHP Chinese website!