Pengikatan Atribut dan Class
Ikat atribut, class dan gaya secara dinamik.
Pengikatan Atribut dan Class ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.
Mengikat Kelas dan Gaya
Keperluan yang biasa ialah menukar kelas atau gaya elemen berdasarkan keadaan.
Vue memberikan layanan khas kepada :class dan :style supaya anda boleh menghantar objek dan tatasusunan, bukan sekadar rentetan.
Sintaks Objek :class
Hantar objek kepada :class. Kuncinya ialah nama kelas; nilai yang benar akan memasukkan kelas tersebut.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->Menggabungkan Kelas Statik dan Dinamik
Atribut class statik dan :class dinamik akan digabungkan.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>Sintaks Tatasusunan :class
Hantar tatasusunan untuk menggunakan senarai kelas.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->Ungkapan Bersyarat dalam Tatasusunan
Anda boleh mencampurkan ungkapan bersyarat dalam tatasusunan.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>Pengikatan Gaya Sebaris
Direktif :style mengikat gaya sebaris menggunakan objek.
Gunakan nama sifat dalam camelCase seperti fontSize.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style dengan Tatasusunan
Anda boleh menghantar tatasusunan objek gaya, dan Vue akan menggabungkannya.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>Penambahan Awalan Automatik
Apabila sifat CSS memerlukan awalan vendor, Vue boleh menambahkannya secara automatik apabila disokong oleh pelayar.
- Anda menulis sifat standard
- Vue menggunakan awalan yang betul jika diperlukan
Ini memastikan pengikatan gaya anda kekal kemas.
Pengikatan Atribut Dinamik
Sebarang atribut boleh diikat secara dinamik dengan :attr.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>Atribut Boolean
Bagi atribut boolean seperti disabled, Vue hanya menyertakan atribut tersebut apabila nilainya dianggap benar.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->Pengikatan Bersyarat bagi Pelbagai Kelas
Contoh praktikal untuk menghidupkan atau mematikan beberapa kelas serentak.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>Semakan Pantas
Uji pemahaman anda tentang pengikatan kelas dan gaya.
Imbas Kembali: Pengikatan Atribut dan Kelas
Anda telah mempelajari pengikatan dinamik:
- Sintaks objek :class menghidupkan atau mematikan kelas berdasarkan nilai yang dianggap benar
- Sintaks tatasusunan :class menggunakan senarai
- :style mengikat gaya sebaris dengan kunci camelCase
- Sebarang atribut boleh diikat dengan :attr
- Atribut boolean hanya muncul apabila nilainya dianggap benar
Seterusnya: asas component dan komunikasi.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Soalan Lazim
Adakah pelajaran “Pengikatan Atribut dan Class” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Pengikatan Atribut dan Class”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.
Apakah yang akan saya pelajari dalam “Pengikatan Atribut dan Class”?
Ikat atribut, class dan gaya secara dinamik. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 3.
Berapa lamakah pelajaran “Pengikatan Atribut dan Class” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Interpolasi dan Arahan
- Syarat dan Gelung
- Pengikatan Atribut dan Class