Menambah Attribut Html Secara Kondisional Di Vue Js
cara menambah attribut html secara kondisional dengan vue js - Halo teman-teman! Selamat tiba di artikel TB kali ini! Di kesempatan kali ini, aku akan membagikan tutorial salah satu framework javascript yang cukup naik daun akhir-akhir ini, yaitu Vue Js.
Baca Juga: Cara Kerja dan Contoh Penggunaan Socket.IO Node Js
Artikel kali ini akan membahas wacana bagaimana cara menambah attribut di dalam sebuah elemen atau tag html, tetapi secara kondisional. Atau bahasa kerennya add attribut conditional v-if dengan vue js.
Kode berikut ini sudah aku ringkas sesingkat-singkatnya biar gampang dipakai. Berikut ini yaitu isyarat untuk menambah attribut secara kondisional.
:attribut_tambahan="conditional ? true : false"Cukup singkat sekali kan? Nah, terus gimana cara penggunaanya? berikut ini pola dari penggunaan struktur isyarat dasar tersebut.
:class="a===b ? 'bg-primary' : 'bg-danger' "Atau bila diterjemahkan menyerupai ini:
Tambahkan attribut class dengan isi 'bg-primary' bila a === b. Jika tidak, maka isi dengan 'bg-danger'.
Tentunya variabel a dan b sudah dideklarasikan sebelumnya. Disini hanya sebagai contoh.
Oh iya, kecanggihan lain dari isyarat tersebut adalah, bila sudah ada attribut yang sama, maka akan otomatis masuk ke attribut tersebut menjadi satu. Misal
<div class="container" :class="a===b ? 'bg-primary' : 'bg-danger' "></div>Jika a===b bernilai true, maka hasil render menjadi menyerupai ini.
<div class="container bg-primary"></div>Cuanggih kan?
Oke, sekian artikel kali ini wacana penambahan attribut html secara kondisional dengan vue js. Semoga bermanfaat! Terima kasih! Sumber https://teziger.blogspot.com/