يجب أن يتعلم Vue.js كل يوم وربط بالأناقة

من المتطلبات الشائعة لربط البيانات قائمة الفئة لعناصر التشغيل وأسلوبها المضمّن. لأنها كلها سمات ، يمكننا التعامل معها مع 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 أكثر.