Menambah Attribut HTML Secara Kondisional di Vue Js

cara menambah attribut html secara kondisional dengan vue js - Halo teman-teman! Selamat datang di artikel TB kali ini! Di kesempatan kali ini, saya 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 tentang 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 saya ringkas sesingkat-singkatnya agar mudah dipakai. Berikut ini adalah kode untuk menambah attribut secara kondisional.

:attribut_tambahan="conditional ? true : false"

Cukup singkat sekali kan? Nah, terus gimana cara penggunaanya? berikut ini contoh dari penggunaan struktur kode dasar tersebut.

:class="a===b ? 'bg-primary' : 'bg-danger' "

Atau jika diterjemahkan seperti ini:

Tambahkan attribut class dengan isi 'bg-primary' jika 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 kode tersebut adalah, jika 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 seperti ini.

<div class="container bg-primary"></div>

Cuanggih kan?

Oke, sekian artikel kali ini tentang penambahan attribut html secara kondisional dengan vue js. Semoga bermanfaat! Terima kasih!