1. Pendahuluan
Saya percaya semua orang tahu bahwa persyaratan umum untuk pengikatan data adalah daftar kelas elemen operasi dan gaya inline -nya. Karena mereka semua adalah properti, kita dapat menanganinya dengan v-bind : kita hanya perlu menghitung string akhir dari ekspresi. Namun, splicing string merepotkan dan mudah membuat kesalahan. Jadi Vue.js secara khusus meningkatkannya ketika v-bind digunakan untuk kelas dan gaya. Jenis hasil ekspresi dapat berupa objek atau array selain string.
2. Bind HTML Class
Harap dicatat: Meskipun Anda dapat menggunakan tag kumis untuk mengikat kelas, seperti class="{{ className }}" , 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:class 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 " static class-a class-b .
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:class 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.
2. Bind inline gaya
Sintaks Objek
Sintaks objek dari v-bind:style 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.
3. Sintaks array
v-bind:style dapat menerapkan beberapa objek gaya ke satu elemen:
<Div v-bind: style = "[styleObjecta, styleObjectB]">
Secara otomatis menambahkan awalan
Ketika v-bind:style menggunakan atribut CSS yang membutuhkan awalan vendor, seperti transformasi, vue.js akan secara otomatis mendeteksi dan menambahkan awalan yang sesuai.
4. Ringkasan
Di atas adalah seluruh konten kelas pengikat Vue.js dan gaya gaya yang dikompilasi untuk Anda. Artikel ini diperkenalkan secara rinci dan memiliki nilai pembelajaran referensi tertentu. Saya berharap ini akan membantu semua orang untuk belajar Vue.Js. Editor juga akan memperbarui informasi tentang Vue.js satu demi satu. Teman yang tertarik, terus perhatikan wulin.com.