Bagaimana untuk menambah gaya selepas klik vue

Dalam Vue.js, kami boleh mengawal gaya elemen dengan mengikat atribut kelas dan menukar status elemen melalui peristiwa klik, dengan itu mencapai kesan penambahan gaya selepas mengklik. Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk mencapai fungsi ini.

1. Mula-mula, tentukan pembolehubah dalam contoh Vue untuk mengawal gaya elemen.

data () {
  return {
    isActive: false
  }
}

2. Ikat atribut kelas kepada elemen.

<div :class="{active: isActive}" @click="isActive = !isActive">Click me</div>

3. Jelaskan maksud kod di atas. Kami menggunakan arahan :class dalam teg div untuk mengikat objek Nama atribut objek ialah nama kelas gaya, dan nilai atribut ialah jenis boolean, yang digunakan untuk mengawal sama ada gaya itu berkesan atau tidak. Apabila isActive adalah benar, atribut aktif dalam objek akan berkuat kuasa, dengan itu menambah gaya aktif pada teg div. Apabila isActive palsu, gaya ini tidak akan berkuat kuasa. Pada masa yang sama, kami menggunakan arahan @click untuk memantau acara klik pada teg div dan menyongsangkan nilai isActive untuk mencapai kesan menambah gaya selepas mengklik.

4. Gunakan helaian gaya CSS untuk menentukan gaya aktif.

.active {
  background-color: red;
}

5. Tambah kesan animasi gaya (pilihan).

.active {
  background-color: red;
  animation: active 0.5s;
}

@keyframes active {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Tambahkan animasi bernama aktif pada helaian gaya untuk mencapai kesan peralihan kecerunan gaya. Apabila gaya aktif pada tag div berkuat kuasa, kesan animasi juga akan dicetuskan, menjadikan antara muka lebih jelas dan menarik.

Ringkasan:

Melalui arahan :class dan @click directive Vue.js, kami boleh mencapai kesan penambahan gaya selepas mengklik dengan mudah. Pada masa yang sama, kami juga boleh menggunakan kesan animasi dalam helaian gaya CSS untuk menambah kesan dinamik asas pada halaman, menjadikannya lebih jelas dan menarik.

Atas ialah kandungan terperinci Bagaimana untuk menambah gaya selepas klik vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!