1. مقدمة
أعتقد أن الجميع يعلم أن الشرط الشائع لربط البيانات هو قائمة فئة عناصر التشغيل وأسلوبها المضمّن. نظرًا لأنها جميعها خصائص ، يمكننا التعامل معها باستخدام v-bind : نحتاج فقط إلى حساب السلسلة النهائية من التعبير. ومع ذلك ، فإن الربط السلسلة مزعج وسهل ارتكاب أخطاء. لذا فإن vue.js يعززها على وجه التحديد عند استخدام v-bind للفئة والأناقة. يمكن أن يكون نوع النتيجة للتعبير كائنًا أو صفيفًا بالإضافة إلى سلسلة.
2. ربط فئة HTML
يرجى ملاحظة: على الرغم من أنه يمكنك استخدام علامة الشارب لربط الفئة ، مثل class="{{ className }}" ، لا نوصي طريقة الكتابة هذه و v-bind:class . واحد فقط من الاثنين يمكن اختيار!
بناء الجملة
يمكننا تمرير كائن إلى v-bind:class لتحويل الفئة ديناميكيًا. لاحظ أن v-bind:class Directive يمكن أن يتعايش مع ميزات الطبقة العادية:
<div v-bind: class = "{'class-a': isa ، 'class-b': ISB}"> </viv> البيانات: {isa: true ، ISB: false}تم تقديمها على النحو التالي:
<viv> </viv>
عندما يتغير ISA و ISB ، سيتم تحديث قائمة الفصل وفقًا لذلك. على سبيل المثال ، إذا أصبح ISB صحيحًا ، فستصبح قائمة الفصل " static class-a class-b ".
يمكنك أيضًا ربط كائن مباشرة في البيانات:
<div v-bind: class = "classObject"> </viv>
البيانات: {classObject: {'class-a': true ، 'class-b': false}}يمكننا أيضًا ربط خاصية محسوبة تُرجع الكائن هنا. هذا وضع شائع الاستخدام وقوي.
بناء جملة الصفيف
يمكننا تمرير صفيف إلى v-bind:class لتطبيق قائمة الفصل:
<div v-bind: class = "[classa ، classb]">
البيانات: {classa: 'class-a' ، classb: 'class-b'}تم تقديمها على النحو التالي:
<viv> </viv>
إذا كنت تريد أيضًا تبديل الفصل في القائمة وفقًا للشروط ، فيمكنك استخدام تعبير ثلاثي:
<div v-bind: class = "[classa ، ISB؟ classB: '']">
يضيف هذا المثال دائمًا Classa ، ولكن ClassB فقط إذا كان ISB صحيحًا.
2. ربط الأنماط المضمنة
بناء الجملة
بناء جملة الكائن من v-bind:style بديهي للغاية - فهو يشبه إلى حد كبير CSS ، لكنه في الواقع كائن JavaScript. يمكن تسمية أسماء سمات CSS بواسطة Camelcase أو الفصل الأفقي القصير (kebab-case):
<div v-bind: style = "{color: activecolor ، fontsize: fontsize + 'px'}"> </viv> البيانات: {activeColor: 'Red' ، fontsize: 30}عادة ما يكون من الأفضل ربط كائن نمط ، مما يوضح القالب:
<div v-bind: style = "styleObject"> </viv>
البيانات: {styleObject: {color: 'Red' ، fontsize: '13px'}}وبالمثل ، غالبًا ما يتم استخدام بناء جملة الكائن بالاقتران مع الخواص المحسوبة للكائن الذي تم إرجاعه.
3. بناء جملة الصفيف
v-bind:style كائنات نمط متعددة على عنصر واحد:
<div v-bind: style = "[styleObjecta ، styleBjectB]">
إضافة البادئات تلقائيا
عندما يستخدم v-bind:style سمات CSS التي تتطلب بادئات البائع ، مثل التحويل ، ستقوم vue.js باكتشاف البادئة المقابلة تلقائيًا وإضافة البادئة المقابلة.
4. ملخص
ما سبق هو المحتوى الكامل لفئة ربط Vue.js وأنماط النمط التي تم تجميعها لك. يتم تقديم المقالة بالتفصيل ولديها قيمة تعليمية مرجعية معينة. آمل أن يكون من المفيد للجميع أن يتعلموا vue.js. سيقوم المحرر أيضًا بتحديث المعلومات حول Vue.js واحدة تلو الأخرى. الأصدقاء المهتمين ، يرجى الاستمرار في الانتباه إلى wulin.com.