Binding Dinamis dan Banyak Binding dengan v-bind
Nama atribut dinamis :[dynamicAttr], sintaks objek v-bind, mengikat beberapa atribut sekaligus.
Binding Dinamis dan Banyak Binding dengan v-bind adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Mengikat Atribut Secara Dinamis
Direktif v-bind (singkatan :) menghubungkan atribut HTML ke nilai reaktif. Direktif ini mendukung kelas dan gaya dinamis, bahkan atribut yang namanya ditentukan secara dinamis.
v-bind Dasar
Ikat atribut apa pun ke sebuah ekspresi. Saat nilainya berubah, Vue memperbarui atribut tersebut.
<img :src="imageUrl" :alt="description" />Pengikatan Kelas: Sintaks Objek
Untuk kelas, sintaks objek mengaktifkan atau menonaktifkan kelas berdasarkan nilai yang bernilai benar. Kuncinya adalah nama kelas; nilainya menentukan apakah kelas tersebut diterapkan.
<div :class="{ active: isActive, disabled: isDisabled }"></div>Pengikatan Kelas: Sintaks Larik
Sintaks larik menerapkan daftar kelas. Campurkan teks statis dan variabel reaktif, atau sematkan objek untuk entri bersyarat.
<div :class="[baseClass, isActive ? activeClass : '']"></div>Menggabungkan Larik dan Objek
Anda dapat menyematkan bentuk objek di dalam larik untuk mendapatkan manfaat keduanya—kelas yang selalu aktif sekaligus kelas bersyarat.
<div :class="[baseClass, { active: isActive }]"></div>Pengikatan Gaya: Sintaks Objek
Ikat gaya sebaris menggunakan objek. Gunakan nama properti camelCase (atau format dengan tanda hubung dalam tanda kutip). Nilainya dapat bersifat reaktif.
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>Pengikatan Gaya: Larik Objek
Teruskan larik objek gaya untuk menggabungkan beberapa sumber gaya, seperti gaya dasar dan penggantian tema.
<div :style="[baseStyles, overrideStyles]"></div>Mengikat Banyak Atribut Sekaligus
v-bind tanpa argumen menyebarkan seluruh objek atribut ke elemen. Setiap kunci menjadi sebuah atribut.
<script setup>
const attrs = { id: 'main', class: 'box', 'data-role': 'panel' }
</script>
<template>
<div v-bind="attrs"></div>
</template>Nama Atribut Dinamis
Gunakan tanda kurung siku untuk menghitung nama atribut itu sendiri saat program berjalan. Ekspresi di dalam kurung dievaluasi dan digunakan sebagai kunci atribut.
<script setup>
const attrName = 'title'
const attrValue = 'Hello'
</script>
<template>
<div :[attrName]="attrValue"></div>
</template>Kapan Menggunakan Masing-Masing
- Sintaks kelas objek — mengaktifkan atau menonaktifkan beberapa kelas berdasarkan kondisi.
- Sintaks kelas larik — menggabungkan kelas dasar dengan kelas bersyarat.
v-bind="obj"— meneruskan seluruh kumpulan atribut.- Nama dinamis
:[name]— saat kunci atribut ditentukan ketika program berjalan.
Contoh Gabungan
Elemen ini menggunakan kelas dinamis, gaya dinamis, dan atribut yang disebarkan secara bersamaan—semuanya reaktif.
<div
:class="[base, { active: isActive }]"
:style="{ color: textColor }"
v-bind="extraAttrs"
></div>Pemeriksaan Singkat
Uji pengetahuan Anda tentang v-bind.
Ringkasan
Anda telah mempelajari cakupan v-bind:
- Sintaks kelas objek mengaktifkan atau menonaktifkan kelas berdasarkan kondisi; sintaks larik menggabungkannya.
- Pengikatan gaya menggunakan objek (
camelCase) atau larik objek. v-bind="obj"menyebarkan semua atribut dari sebuah objek.:[name]="val"mengikat atribut yang namanya ditentukan secara dinamis.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Binding Dinamis dan Banyak Binding dengan v-bind” gratis?
Ya — teks lengkap “Binding Dinamis dan Banyak Binding dengan v-bind” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Binding Dinamis dan Banyak Binding dengan v-bind”?
Nama atribut dinamis :[dynamicAttr], sintaks objek v-bind, mengikat beberapa atribut sekaligus. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Binding Dinamis dan Banyak Binding dengan v-bind” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- v-model: Bagian Internal Binding Dua Arah
- Pengubah Peristiwa v-on
- Binding Dinamis dan Banyak Binding dengan v-bind
- Menulis Direktif Khusus