Persyaratan umum untuk pengikatan data adalah daftar kelas elemen operasi dan gaya inline -nya. Karena mereka semua adalah atribut, kita dapat menanganinya dengan V-bind: cukup hitung string akhir dari ekspresi. Namun, splicing string merepotkan dan mudah membuat kesalahan. Oleh karena itu, Vue.js secara khusus meningkatkannya ketika V-bind digunakan untuk kelas dan gaya. Jenis hasil ekspresi dapat berupa objek atau array selain string.
Mengikat kelas HTML
Meskipun Anda dapat menggunakan tag kumis untuk mengikat kelas, seperti `{ % raw %} class =" {{className}} "{ % endraw %}`, kami tidak merekomendasikan metode penulisan ini dan `v-bind: class`. Hanya satu dari keduanya yang dapat dipilih!
Sintaks Objek
Kita dapat meneruskan objek ke V-Bind: kelas untuk beralih kelas secara dinamis. Perhatikan bahwa V-Bind: Class Directive dapat hidup berdampingan dengan fitur kelas biasa:
<Div v-bind: class = "{'class-a': Isa, 'class-b': isb}"> </div> data: {Isa: true, isb: false}Diterjemahkan sebagai:
<div> </div>
Ketika ISA dan ISB berubah, daftar kelas akan diperbarui sesuai. Misalnya, jika ISB menjadi benar, daftar kelas akan menjadi "Kelas-B Class-B" statis.
Anda juga dapat secara langsung mengikat objek dalam data:
<Div v-bind: class = "classObject"> </div> data: {classObject: {'class-a': true, 'class-b': false}}Kami juga dapat mengikat properti yang dihitung yang mengembalikan objek di sini. Ini adalah mode yang umum digunakan dan kuat.
Sintaks array
Kita dapat meneruskan array ke v-bind: kelas untuk menerapkan daftar kelas:
<Div v-bind: class = "[classa, classb]"> data: {classa: 'class-a', classb: 'class-b'}Diterjemahkan sebagai:
<div> </div>
Jika Anda juga ingin mengganti kelas dalam daftar sesuai dengan kondisi, Anda dapat menggunakan ekspresi terner:
<Div v-bind: class = "[classa, isb? classb: '']">
Contoh ini selalu menambahkan classa, tetapi classb hanya jika ISB benar.
Namun, menulis dengan cara ini agak rumit ketika ada beberapa kelas bersyarat. Dalam 1.0.19+, sintaks objek dapat digunakan dalam sintaks array:
<Div v-bind: class = "[classa, {classb: isb, classc: iSc}]">
BIND Gaya inline
Sintaks Objek
Sintaks objek dari V -Bind: Gaya sangat intuitif - terlihat sangat mirip dengan CSS, tetapi sebenarnya adalah objek JavaScript. Nama atribut CSS dapat dinamai oleh Camelcase atau pemisahan horizontal pendek (KAS KEBAB):
<Div v-bind: style = "{color: activeColor, fontsize: fontsize + 'px'}"> </div> data: {activeColor: 'red', fontsize: 30}Biasanya lebih baik mengikat langsung ke objek gaya, membuat templat lebih jelas:
<Div v-bind: style = "styleObject"> </div> data: {styleObject: {color: 'red', fontsize: '13px'}}Demikian pula, sintaks objek sering digunakan bersama dengan sifat yang dihitung dari objek yang dikembalikan.
Sintaks array
V-Bind: Sintaks array Style dapat menerapkan beberapa objek gaya ke satu elemen:
<Div v-bind: style = "[styleObjecta, styleObjectB]">
Secara otomatis menambahkan awalan
Ketika V-Bind: Gaya menggunakan atribut CSS yang membutuhkan awalan vendor, seperti transformasi, vue.js akan secara otomatis mendeteksi dan menambahkan awalan yang sesuai.
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Untuk tutorial pembelajaran vue lebih lanjut, silakan baca topik khusus "Tutorial Praktis Vue"
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.