من المتطلبات الشائعة لربط البيانات قائمة الفئة لعناصر التشغيل وأسلوبها المضمّن. لأنها كلها سمات ، يمكننا التعامل معها مع V-bind: فقط احسب السلسلة النهائية من التعبير. ومع ذلك ، فإن الربط السلسلة مزعج وسهل ارتكاب أخطاء. لذلك ، يعزز Vue.js على وجه التحديد عند استخدام V-bind للفئة والأناقة. يمكن أن يكون نوع النتيجة للتعبير كائنًا أو صفيفًا بالإضافة إلى سلسلة.
ربط فئة HTML
على الرغم من أنه يمكنك استخدام علامة الشارب لربط الفئة ، مثل `{٪ raw ٪} class =" {{className}} "{٪ endraw ٪}` ، لا نوصي طريقة الكتابة هذه و `v-bind: class`. واحد فقط من الاثنين يمكن اختيار!
بناء الجملة
يمكننا تمرير كائن إلى V-bind: فئة لتحويل الفئة ديناميكيًا. لاحظ أن V-Bind: Class Directive يمكن أن يتعايش مع ميزات الطبقة العادية:
<div v-bind: class = "{'class-a': isa ، 'class-b': ISB}"> </viv> البيانات: {isa: true ، ISB: false}تم تقديمها على النحو التالي:
<viv> </viv>
عندما يتغير ISA و ISB ، سيتم تحديث قائمة الفصل وفقًا لذلك. على سبيل المثال ، إذا أصبح ISB صحيحًا ، فستصبح قائمة الفصل "فئة ثابتة من الفئة-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 صحيحًا.
ومع ذلك ، فإن الكتابة بهذه الطريقة هي مرهقة بعض الشيء عندما تكون هناك فصول مشروطة متعددة. في 1.0.19+ ، يمكن استخدام بناء جملة الكائن في بناء جملة المصفوفة:
<div v-bind: class = "[classa ، {classb: ISB ، classc: isc}]">
ربط أنماط مضمنة
بناء الجملة
بناء جملة الكائن من V -bind: النمط بديهي للغاية - فهو يشبه إلى حد كبير 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> البيانات: {styleBject: {color: 'Red' ، fontsize: '13px'}}وبالمثل ، غالبًا ما يتم استخدام بناء جملة الكائن بالاقتران مع الخواص المحسوبة للكائن الذي تم إرجاعه.
بناء جملة الصفيف
V-bind: يمكن أن يطبق بناء جملة صفيف النمط كائنات نمط متعددة على عنصر واحد:
<div v-bind: style = "[styleObjecta ، styleBjectB]">
إضافة البادئات تلقائيا
عندما يستخدم V-bind: يستخدم النمط سمات CSS التي تتطلب بادئات البائع ، مثل التحويل ، ستقوم vue.js باكتشاف البادئة المقابلة تلقائيًا وإضافة البادئة المقابلة.
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.
لمزيد من البرامج التعليمية التعليمية ، يرجى قراءة الموضوع الخاص "Vue العملي التعليمي"
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.