v-show التبديل بين الظهور والإخفاء عبر CSS
آخر تحديث: 2026-10-22
v-show التبديل بين الظهور والإخفاء عبر CSS
يبدِّل v-show نمط display للعنصر وفق التعبير. يبقى العنصر دائمًا في DOM — يتغيّر ظهوره فقط.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<p v-show="isVisible">Now you see me</p>⚙️ الوسائط
| expression | أي تعبير يُقيَّم صحيحًا (truthy) أو خاطئًا (falsy) |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Toggling hides/shows the text while the element remains in the DOM with display: none.💡 نقاط مهمة
💡 نصيحة عند التبديل المتكرر يكون v-show أرخص — فهو يغيّر CSS فقط دون التلاعب بـ DOM.
ℹ️ ملاحظة إذا كان التعبير خاطئًا في البداية يظل العنصر يُعرض (ويبقى في مكانه)، بتكلفة أكبر مقدمًا.
⚠️ تحذير لا يدعم v-show الربط مع v-else — فهو تبديل لأنماط العرض وليس توجيه تفرّع.
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س v-show أم v-if — أيهما؟
ج تبديل متكرر ← v-show (CSS فقط). تغيّرات نادرة أو عرض مؤجَّل ← v-if.
س هل يظهر العنصر المخفي بـ v-show في DevTools؟
ج نعم، يبقى العنصر في DOM مع display: none.
س هل يمكن إقران v-show مع v-else؟
ج لا — ليس v-show توجيه تفرّع؛ استخدم v-if / v-else للعرض الحصري.
