العرض / التقديم الشرطي في Vue مع v-if و v-show و v-else و v-else-if

المُقدّمة

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

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

في هذه المقالة ، سنلقي نظرة على طرق مختلفة للعرض المشروط في Vue.js باستخدام ملف v-if, v-else-ifو v-else التوجيهات. سنلقي نظرة أيضًا على بعض الأمثلة ونبرز الفرق بين v-if و v-show.

v- إذا

• v-if التوجيه يستخدم ل تصيير كتلة بشكل مشروط بمعنى الكتلة مع v-if ستكون السمة فقط أنتج إذا أرجع تعبير التوجيه a true القيمة. إذا كان التعبير ينتج نتيجة غير صالحة (على سبيل المثال ، null, 0، سلسلة فارغة، false) ، العنصر هو تم الحذف من DOM.

دعنا نوضح هذا السلوك في المثال العملي:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

منذ login ومن المقرر أن trueأطلقت حملة <div> كتلة تحتوي على v-if سيتم إنتاج التوجيه ، وبالتالي يتم عرضه.

v- إذا vs v-show

تجدر الإشارة إلى أن v-show سيعمل أيضًا في المثال أعلاه وسيعمل على ما يبدو بشكل متماثل ، ولكن هناك فرق بين الاثنين.

v-if يعرض بشروط عنصر ، حيث v-show يعرض / يعرض مشروطا عنصر.

هذا يعني أنه عند تبديل الشرط ، v-if سيقوم في الواقع بحذف واستعادة المكونات wile v-show فقط يجعلها غير مرئية أو مرئية. الرسوم المتحركة التالية توضح كيف v-if في الواقع يحذف ويعيد إنتاج كتل التعليمات البرمجية:

في هذه الأثناء، v-show سيحتفظ دائمًا بالعنصر في DOM وسيغير CSS الخاص به لتبديل مظهره (من خلال تعيين ملف display إلى none):

v- آخر

• v-else التوجيه هو v-if التوجيه الذي يسمح لك بتخصيص ملف false القيمة في الاداءات الشرطية. إذا لم يكن كذلك true، يمكنك استخدام v-else لتحديد ما يجب أن يحدث بدلاً من ذلك.

على سبيل المثال ، افترض أن لدينا إدخال كلمة مرور ، ونريده أن ينتج رسالة خطأ ، "كلمة مرور ضعيفة"، إذا كان طول الإدخال أقل من 6 أو عرض "كلمة مرور قوية" إذا كان الطول أكبر من 6.

هذا تصيير شرطي ، مع وجود خيار للتعامل مع الحالة الخاطئة:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

دعنا نستخدم هذا لتبديل محتويات صفحة تسجيل دخول بسيطة بحيث تغير الرسالة بناءً على ما إذا كان المستخدم قد قام بتسجيل الدخول أم لا. سنقوم بتعديل صياغة الزر بناءً على ملف userLoggedIn الحالة كذلك:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

سيؤدي حدث النقر على الزر إلى تبديل ملف userLoggedIn عنصر البيانات ، وسيؤثر ذلك على البيانات المعروضة كما هو موضح أدناه:

v- آخر- إذا

v-else-if extends a v-if مع else...if منع. هذا مشابه لجافا سكريبت else...if منع من حيث أنه يسمح لنا بإضافة عبارة if إلى ملف موجود v-if. يستخدم هذا عندما يكون هناك العديد من المعايير للتحقق ويمكن تقييدها عدة مرات:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

وفي الختام

في هذه المقالة ، رأينا كيفية عرض عنصر مشروطًا بامتداد v-if, v-elseو v-else-if. أوضحنا أيضًا الفرق بين v-if و v-show.

• كوينسمارت. أفضل بورصة للبيتكوين والعملات المشفرة في أوروبا.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. دخول مجاني.
• كريبتوهوك. الرادار. تجربة مجانية.
• المصدر: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/