Binding Atribut, Class & Style

Masalah: kurung kurawal ganda tidak bisa dipakai di atribut

Interpolasi hanya untuk isi teks. Untuk mengatur atribut (src, href, disabled, class…) dari data, gunakan directive v-bind — yang hampir selalu ditulis singkat dengan titik dua :.

<img v-bind:src="gambar">
<img :src="gambar">           <!-- sama, versi singkat (dipakai sehari-hari) -->
<a :href="tautan">Buka</a>
<img :alt="'Foto ' + nama">    <!-- isi atribut = ekspresi JS -->

Nilai di dalam tanda kutip setelah :atribut= adalah ekspresi JavaScript, bukan teks biasa. Bandingkan: alt="nama" berarti teks "nama", sedangkan :alt="nama" berarti isi variabel nama.

Atribut boolean

Atribut seperti disabled, checked, readonly aktif jika ada, mati jika tidak ada. Dengan bind, nilai truthy menampilkan atribut dan falsy menghapusnya.

<button :disabled="habis">Beli</button>
const habis = ref(true)    // tombol nonaktif

Class binding

Ada tiga bentuk. Semuanya bisa digabung dengan atribut class statis.

<!-- 1. Objek: kunci = nama class, nilai = kondisi -->
<div class="kartu" :class="{ aktif: menyala, redup: !menyala }"></div>

<!-- 2. Array: daftar class -->
<div :class="[kelasUtama, kelasTambahan]"></div>

<!-- 3. Array berisi ternary / objek -->
<div :class="[menyala ? 'terang' : 'gelap', { besar: besar }]"></div>

Dengan menyala = true, bentuk pertama menghasilkan class="kartu aktif".

Style binding

<p :style="{ color: warna, fontSize: ukuran + 'px' }">Teks</p>
<p :style="[gayaDasar, gayaTambahan]">Teks</p>

• Properti CSS bisa ditulis camelCase (fontSize) atau kebab-case dalam tanda kutip ('font-size').
• Untuk kondisi yang rumit, lebih baik pakai class daripada style inline.

Mengikat banyak atribut sekaligus

<input v-bind="atributInput">
const atributInput = { type: 'text', placeholder: 'Nama', maxlength: 20 }

Singkatan nama sama (Vue 3.4+)

Jika nama atribut sama dengan nama variabel, tulis :id saja — setara :id="id".

Tabel ringkas

Kesalahan umum

• Lupa titik dua: src="gambar" memuat file bernama "gambar", bukan isi variabelnya.
• Di objek class, nama class berisi tanda hubung harus dikutip: { 'teks-merah': true }.
• Menulis nilai px tanpa satuan: fontSize: 20 tidak valid, tulis ukuran + 'px'.