v-if توجيه العرض الشرطي
آخر تحديث: 2026-10-22
v-if توجيه العرض الشرطي
يعرض v-if الكتلة فقط عندما يكون التعبير صحيحًا (truthy). وعندما يكون خاطئًا يُدمَّر العنصر ويُزال من DOM، وإذا صحَّ التعبير مجددًا يُعاد إنشاؤه.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<div v-if="condition">...</div>
<div v-else-if="anotherCondition">...</div>
<div v-else>...</div>⚙️ الوسائط
| expression | أي تعبير يُقيَّم صحيحًا أو خاطئًا (يكتب مباشرة دون أقواس) |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The page shows 'Now you see me'. Clicking the button removes the paragraph from the DOM.💡 نقاط مهمة
💡 نصيحة التبديل مكلف (تدمير DOM وإعادة إنشائه). عند التبديل المتكرر فضِّل v-show.
⚠️ تحذير لا تستخدم v-if وv-for على العنصر نفسه أبدًا: فأولوية v-if أعلى ولا يمكنه الوصول إلى متغير الحلقة. استخدم template داخليًا بدلًا من ذلك.
ℹ️ ملاحظة يجب أن يلي v-else / v-else-if عنصر v-if مباشرة — دون أي شيء بينهما.
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين v-if وv-show؟
ج يدمِّر v-if العنصر ويعيد إنشاءه فعلًا (عرض مؤجَّل)؛ بينما يعرضه v-show دائمًا ويكتفي بتبديل خاصية display في CSS.
س لماذا يختفي العنصر من DevTools عندما يكون الشرط خاطئًا؟
ج هذا هو سلوك v-if تحديدًا: يُزال العنصر من DOM ويُدمَّر، ولا يُخفى فحسب.
س هل يمكن الجمع بين v-if وv-for؟
ج ليس على العنصر نفسه. غلِّف عنصر v-for بـ <template v-if> خارجي بدلًا من ذلك.
