كيفية تنفيذ العرض الشرطي في Vue.js

Vue.js هو إطار عمل JavaScript شائع يجعل من السهل إنشاء تطبيقات ويب ديناميكية. يمكن لـ Vue.js عرض المحتوى بناءً على البيانات والأحداث. هذا مفيد بشكل خاص لإنشاء واجهات مستخدم تفاعلية ومتجاوبة.

تعرف على ماهية توجيهات Vue وكيفية استخدامها لتحقيق العرض الشرطي في Vue.js.

ما هي توجيهات Vue؟

تسمح لك توجيهات Vue بتحسين سلوك عناصر HTML في قوالب Vue.js عن طريق إضافة سمات فريدة إليها.

تعتبر التوجيهات جزءًا أساسيًا من Vue.js وتوفر طريقة بسيطة وفعالة للتلاعب بـ نموذج كائن المستند (DOM)وإضافة سلوك ديناميكي إلى العناصر وإدارة البيانات.

بالإضافة إلى ذلك ، يتيح لك Vue.js إنشاء توجيهات مخصصة ، مما يتيح لك إنشاء وظائف قابلة لإعادة الاستخدام لتطبيقات Vue بسهولة.

يسبق إطار عمل Vue توجيهاته بـ "الخامس-" قبل اسم التوجيه. تتضمن أمثلة التوجيهات شائعة الاستخدام في Vue v-on, v- ربط, مقابل، و v- إذا.

ما هو العرض الشرطي؟

يتيح لك العرض الشرطي عرض العناصر أو إخفائها بناءً على الشروط التي تحددها. على سبيل المثال ، يمكنك استخدام العرض الشرطي لإظهار رسالة للمستخدمين فقط إذا قاموا بإدخال عنوان بريد إلكتروني صالح.

في Vue.js ، يمكنك استخدام توجيهات مثل v- إذا و v-show لتحقيق العرض الشرطي في التطبيق الخاص بك ، بطريقة مختلفة عن الطريقة التي تريدها عرض المحتوى بشكل مشروط في React.js.

تحقيق العرض الشرطي باستخدام التوجيه v-if

مشابه ل جافا سكريبت إذا كان غير ذلك إفادة، ال v- إذا التوجيه في Vue.js يحمل شرطًا. إذا لم يتم استيفاء الأمر ، يقوم Vue.js بتقييم الشرط التالي المحدد في ملف v- آخر التوجيهي ويستمر في القيام بذلك حتى يفي بشرط ما أو يقيم جميع الشروط.

يسمح لك هذا التوجيه بالتقديم الشرطي لعنصر بناءً على قيمة منطقية. لن يقوم برنامج التحويل البرمجي Vue.js بعرض الجزء إذا كانت قيمته خاطئة.

فيما يلي مثال على عرض المحتوى بشروط v- إذا:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>وثيقةعنوان>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">
<h1v- إذا='خطأ شنيع' >{{رسالة 1}}h1>
<h1v- آخر >{{رسالة 2}}h1>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات () {
 يعود {
 message1: "هذا هو تطبيق Vue الخاص بك."،
 message2: "ليس بعد تطبيق Vue."
 }
 }
 })
 app.mount ("# تطبيق")
النصي>
جسم>
لغة البرمجة>

يوضح جزء التعليمات البرمجية أعلاه تطبيق Vue الذي تم إنشاؤه عن طريق إضافة ملف شبكة توصيل المحتوى (CDN) الارتباط بجسم ملف HTML الخاص بك. سيقوم التوجيه v-if بتصيير عنصر h1 فقط إذا كان شرطه صحيحًا.

في تطبيقات Vue ، هناك مواقف تحتاج فيها إلى تقديم مكون بناءً على معايير ديناميكية محددة. هذا مفيد في السيناريوهات مثل عرض المعلومات فقط عندما ينقر المستخدم على زر أو يظهر مؤشر التحميل أثناء تحميل البيانات من واجهة برمجة التطبيقات.

على سبيل المثال:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<عنوان>تطبيق Vueعنوان>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">
<شعبةv- إذا="showUsers">
<ماي>
<لي>المستخدم 1لي>
<لي>مستخدم 2لي>
ماي>
شعبة>
<زرv-on: انقر فوق="toggleShowUsers ()">
 تبديل المستخدمين
زر>
<h1>{{ رسالة }}h1>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات () {
 يعود {
 showUsers: صحيح ،
 الرسالة: "هذا هو تطبيق Vue الخاص بك."
 }
 },
 طُرق: {
 toggleShowUsers () {
 this.showUsers =! this.showUsers
 }
 }
 })
 app.mount ("# تطبيق")
النصي>
جسم>
لغة البرمجة>

يستخدم كتلة التعليمات البرمجية أعلاه v- إذا توجيه لعرض المحتوى بشكل مشروط بناءً على قيمة المتغير المنطقي ، showUsers.

ال شعبة يتم عرض العنصر إذا كانت القيمة حقيقي ومخبأة إذا كانت كذلك خطأ شنيع. النقر فوق ملف تبديل المستخدمين يقوم الزر بتشغيل ملف toggleShowUsers () طريقة لتغيير قيمة showUsers.

يستخدم هذا المثال أيضًا الامتداد v-on توجيه للاستماع إلى الأحداث ، مثل حدث النقر على الزر. يعيد تقييم v- إذا كلما كانت قيمة showUsers التغييرات.

تحقيق العرض الشرطي باستخدام توجيه v-show

ال v-show التوجيه هو طريقة أخرى لإظهار العناصر أو إخفائها في Vue.js بشكل مشروط. إنه مشابه لـ v- إذا التوجيه من حيث أنه يمكنه عرض العناصر بناءً على تعبير منطقي. ومع ذلك ، هناك بعض الاختلافات الجوهرية بين التوجيهين.

ال v-show التوجيه لا يزيل العنصر من DOM عندما يتم تقييم التعبير إلى false. بدلاً من ذلك ، يستخدم CSS لتبديل العناصر عرض بين الممتلكات لا أحد وقيمته الأصلية.

هذا يعني أن العنصر لا يزال موجودًا في DOM ولكنه غير مرئي عندما يكون التعبير خطأ.

هذا مثال:

<جسم>
<شعبةبطاقة تعريف="برنامج">
<شعبةv- إذا="showUsers">
<ماي>
<لي>المستخدم 1لي>
<لي>مستخدم 2لي>
ماي>
شعبة>
<زرv-on: انقر فوق="toggleShowUsers ()">
 تبديل المستخدمين
زر>
<h1v-show="showUsers">{{ رسالة }}h1>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات () {
 يعود {
 showUsers: صحيح ،
 الرسالة: "هؤلاء هم مستخدمو تطبيق Vue"
 }
 },
 طُرق: {
 toggleShowUsers () {
 this.showUsers =! this.showUsers
 }
 }
 })
 app.mount ("# تطبيق")
النصي>
جسم>

تستخدم كتلة التعليمات البرمجية أعلاه الامتداد v-show توجيه لعرض رسالة تفيد ، "هؤلاء هم مستخدمو تطبيق Vue في أي وقت تضغط على زر التبديل.

الاختيار بين v-if و v-show

عند الاختيار بين استخدام v- إذا و v-show توجيهات لإظهار العناصر أو إخفائها في Vue.js بشكل مشروط ، هناك بعض العوامل المهمة التي يجب مراعاتها.

عندما تتغير الحالة نادرًا ، يتم استخدام v- إذا التوجيه جيد. هذا بسبب v- إذا يزيل العنصر من DOM عندما يكون الشرط خاطئًا ، مما قد يعيق الأداء الأمثل. يتم عرض العنصر فقط بمجرد أن يصبح الشرط صحيحًا وإزالته من DOM عندما يصبح الشرط خاطئًا مرة أخرى.

من ناحية أخرى ، إذا كان من المحتمل أن تتغير الحالة بشكل متكرر ، فمن الأفضل استخدام v-show التوجيه ، مما يحسن الأداء. هذا بسبب v-show يستخدم CSS لإخفاء العنصر أو إظهاره عن طريق تبديل خاصية عرض CSS بين لا شيء وحظر ، مع ترك العنصر معروضًا دائمًا إلى DOM.

أصبح العرض الشرطي في تطبيق Vue سهلاً

لقد تعلمت عرض المحتوى بشكل مشروط في تطبيقات Vue باستخدام توجيهات v-if و v-show. من خلال استخدام هذه التوجيهات ، يمكنك عرض المحتوى بسرعة بناءً على ظروف مختلفة ، مما يمنحك مزيدًا من التحكم في مظهر وسلوك مكونات Vue الخاصة بك.