Bagaimana untuk menambah css secara dinamik dalam vue

Cara menambah css secara dinamik dalam Vue ialah: 1. Ikat gaya dinamik pada elemen dengan sintaks "

"; objek data dalam data; 3. Tulis gaya dalam css.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer Dell G3.

Langkah 1: Ikat gaya dinamik pada elemen

1 Tambah satu gaya

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

2. Tambah berbilang gaya

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

Langkah 2: Tentukan objek data dalam data

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

Langkah 3: Tulis gaya dalam css

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

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan】

Atas ialah kandungan terperinci Bagaimana untuk menambah css secara dinamik dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!