في الدرس الثالث سنتحدث عن التصيير الشرطي. كيفية عرض شيء ما على الصفحة فقط إذا تم استيفاء بعض الشروط.
→ درس المبتدئين Vue.js 1: المثال Vue
→ Vue.js للمبتدئين ، الدرس 2: سمات الربط
→ Vue.js الدرس 3: العرض الشرطي
→ Vue.js للمبتدئين الدرس 4: عرض القوائم
→ Vue .js للمبتدئين الدرس الخامس: معالجة الأحداث
→ Vue.js للمبتدئين الدرس 6: فئات وأنماط الربط
← Vue.js للمبتدئين الدرس 7: الخصائص المحسوبة
→ Vue.js للمبتدئين الدرس 8: المكونات
الغرض من الدرس
نحتاج إلى نقش في بطاقة المنتج يخبر الزائر ما إذا كان المنتج متوفرًا أم لا. إذا كان المنتج في المخزن ، يجب عرض نقش
In Stock. إذا لم يكن في الأوراق المالية - نقش Out of Stock. يجب اتخاذ قرار عرض نقش معين على أساس البيانات المخزنة في التطبيق.
الكود الأولي
هذا هو الكود الذي سنبدأ به. إنه كالعادة في الملف
index.htmlفي العلامة <body>:
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
في الملف
main.js، عند إعداد مثيل Vue ، سيتم استخدام كائن البيانات التالي:
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true
}
لاحظ أنه
dataتمت إضافة خاصية جديدة إلى الكائن . هذه خاصية inStockلها قيمة منطقية true.
مهمة
عند تطوير تطبيقات الويب ، غالبًا ما يكون من الضروري عرض عنصر على الصفحة اعتمادًا على استيفاء شرط معين. على سبيل المثال ، إذا انتهى مخزون أحد العناصر ، فأنت بحاجة إلى الإبلاغ عنه في بطاقة العنصر.
تم التخطيط لإصدار الرسائل المقابلة كعناصر
<p>. هذا يعني أنه في مكان ما index.htmlسيكون هناك العناصر التالية:
<p>In Stock</p>
<p>Out of Stock</p>
مهمتنا هي سحب أحدهما في حالة وجود البضائع في المخزون ، والآخر في حالة عدم وجود البضائع في المخزون.
حل المشكلة
في Vue ، يبدو حل هذه المشكلة بسيطًا ومباشرًا.
كما تعلم بالفعل ، فإن البيانات التي تشير إلى وجود أو عدم وجود البضائع في المخزون موصوفة في
main.jsالكائن data:
inStock: true
لإخبار النظام بالعنصر الذي
<p>سيتم عرضه ، يمكننا استخدام التوجيهات v-ifو v-else. هذا يعني أن ما index.htmlيلي سوف يقع في :
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
إذا كان
inStockيحتوي على قيمة صحيحة ، فسيتم طباعة العنصر الأول <p>. خلاف ذلك ، سيتم عرض العنصر الثاني. في حالتنا inStock، القيمة مكتوبة true، لذلك سيتم عرضها In Stock.
لدينا مخزون في المخزون.
العظمى! لقد استخدمنا للتو العرض الشرطي لعرض تفاصيل المنتج. لقد حللنا المشكلة. لكن دعونا لا نتوقف عند هذا الحد ونواصل استكشافنا للتصيير الشرطي.
توجيه V- آخر- إذا
لدينا آلية لتقديم المشروط استنادا إلى المبادئ التوجيهية
v-ifو v-elseيمكن توسيعها عن طريق إضافة مستوى آخر من المنطق. يمكن القيام بذلك باستخدام التوجيه v-else-if. لتوضيح ذلك ، دعونا نعقد مثالنا قليلاً.
افترض أن الكائن
data، في main.js، لديه معلومات حول كمية البضائع. يتم تخزينها في الممتلكات inventory:
inventory: 100
من خلال تحليل هذه الخاصية باستخدام تعبيرات JavaScript المضمنة في علامات الاقتباس ، يمكننا توفير معلومات أكثر دقة عن المنتج لزوار الصفحة:
<p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>
في هذه الحالة ، سيتم عرض العنصر الأول على الصفحة
<p>، حيث تبين أن التعبير المقابل صحيح.
توجيه V-show
إذا احتاج عنصر الصفحة إلى إخفاءه وعرضه بشكل متكرر ، فهذا يعني أنه من المنطقي إلقاء نظرة على التوجيه لتنفيذ هذه الآلية
v-show. سيظل عنصر بمثل هذا التوجيه موجودًا دائمًا في DOM ، ولكنه سيكون مرئيًا فقط إذا تبين أن الشرط الذي تم تمريره إلى التوجيه صحيح. في الواقع ، نحن نتحدث عن حقيقة أنه بفضل استخدام هذا التوجيه ، سيتم تطبيق خاصية CSS على العنصر ، حسب الشرط display: none.
توفر هذه الطريقة أداءً أفضل من إدارة العناصر باستخدام
v-ifو v-else.
يبدو تطبيق هذا التوجيه كما يلي:
<p v-show="inStock">In Stock</p>
حل مشكلتنا ، حيث
v-ifتم استخدام التوجيهات v-else، يناسبنا. لذلك سنركز عليه ولن نغير شيئاً.
ورشة عمل
أضف خاصية إلى كائن البيانات
onSale. يجب استخدامه للتحكم في عرض عنصر <span>يعرض نصًا On Saleويبلغ الزائرين بالبيع.
إليك نموذج يمكنك استخدامه لحل هذه المشكلة.
هنا حل المشكلة.
النتيجة
لقد تعلمت اليوم عن العرض الشرطي باستخدام Vue. وهي تتعلق بما يلي:
- توجد توجيهات Vue تتيح لك عرض العناصر بشكل مشروط:
- v- إذا
- v- آخر- إذا
- v- آخر
- v-show
- عند العمل مع التوجيهات ، يمكنك استخدام تعبيرات JavaScript التي يتم تمريرها إليها بين علامات الاقتباس.
- إذا كان التعبير الذي تم تمريره إلى التوجيه الموجود بين علامات الاقتباس صحيحًا ، فسيتم إخراج العنصر.
v-showيؤثر التوجيه فقط على رؤية العنصر ، ولا يدخل عناصر في DOM ولا يزيل العناصر من DOM.
هل لديك أي مشكلة ، بعد أن بدأت تعارفك مع Vue ، تخطط بالفعل لحلها بمساعدة هذا الإطار؟
→ درس المبتدئين Vue.js 1: المثال Vue
→ Vue.js للمبتدئين ، الدرس 2: سمات الربط
← Vue.js الدرس 3: العرض الشرطي
→ Vue.js للمبتدئين الدرس 4: عرض القوائم
→ Vue .js للمبتدئين الدرس الخامس: معالجة الأحداث
→ Vue.js للمبتدئين الدرس 6: فئات وأنماط الربط
← Vue.js للمبتدئين الدرس 7: الخصائص المحسوبة
→ Vue.js للمبتدئين الدرس 8: المكونات
