vue menukar gaya css

Vue ialah rangka kerja JavaScript popular yang membantu pembangun membina aplikasi web yang kompleks. Vue menyediakan satu set ciri dan alatan berguna yang menjadikan membina antara muka pengguna dinamik lebih mudah. Salah satu cirinya ialah keupayaan untuk menukar gaya CSS dengan mudah.

Dalam Vue, anda boleh menggunakan arahan v-bind untuk mengikat gaya CSS secara dinamik. Arahan v-bind boleh mengikat atribut data contoh Vue kepada atribut elemen DOM. Sebagai contoh, anda boleh menggunakan arahan v-bind:class untuk mengikat nama kelas CSS secara dinamik. Penggunaan khusus adalah seperti berikut:

<div v-bind:class="{ active: isActive }"></div>

Dalam contoh di atas, isActive ialah sifat bagi tika Vue. Jika isActive adalah benar, atribut kelas bagi elemen div akan mengandungi nama kelas "aktif", jika tidak, ia tidak akan mengandungi nama kelas.

Selain menggunakan literal objek untuk menetapkan nama kelas, anda juga boleh menggunakan sifat yang dikira untuk mengembalikan rentetan nama kelas, contohnya:

<div v-bind:class="classObject"></div>

rrree

Dalam contoh di atas, classObject ialah pengiraan harta, Ia mengembalikan literal objek berdasarkan nilai harta isActive Objek mengandungi dua sifat: aktif dan bahaya teks. Jika isActive adalah benar, classObject mengembalikan { active: true, 'text-danger': false } dan atribut kelas elemen div akan mengandungi nama kelas "aktif" Jika tidak, ia mengembalikan { active: false, 'text-. danger': true }, atribut kelas bagi elemen div akan mengandungi nama kelas "bahaya teks".

Selain daripada mengikat nama kelas secara dinamik, anda juga boleh menggunakan arahan gaya v-bind: untuk mengikat gaya sebaris secara dinamik. v-bind:style boleh mengikat atribut data contoh Vue kepada atribut gaya elemen DOM. Sebagai contoh, anda boleh menggunakan arahan v-bind:style untuk mengikat warna latar belakang secara dinamik. Penggunaan khusus adalah seperti berikut:

data: {
  isActive: true
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      'text-danger': !this.isActive
    }
  }
}

Dalam contoh di atas, warna ialah sifat bagi tika Vue. Jika anda menetapkan warna kepada "merah", warna latar belakang elemen div akan menjadi merah.

Selain menggunakan literal objek untuk menetapkan gaya sebaris, anda juga boleh menggunakan sifat yang dikira untuk mengembalikan literal objek yang mengandungi berbilang sifat gaya, contohnya:

<div v-bind:style="{ backgroundColor: color }"></div>

<div v-bind:style="styleObject"></div>

Dalam contoh di atas, styleObject Is sifat dikira yang mengembalikan literal objek berdasarkan nilai sifat textColor dan fontSize Objek mengandungi dua sifat gaya: warna dan saiz fon. Jika textColor ialah "red" dan fontSize ialah 16, maka styleObject mengembalikan { color: 'red', fontSize: '16px' }, dan atribut gaya elemen div akan mengandungi dua atribut gaya ini.

Ringkasnya, Vue menyediakan dua arahan, v-bind:class dan v-bind:style, yang boleh menukar gaya CSS secara dinamik dengan sangat mudah. Arahan ini boleh menetapkan nama kelas dan gaya sebaris secara dinamik berdasarkan sifat dan sifat yang dikira bagi tika Vue, membolehkan aplikasi web mempunyai interaksi dan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci vue menukar gaya css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!