v-html عرض HTML خام
آخر تحديث: 2026-10-22
v-html عرض HTML خام
يحلِّل v-html السلسلة بوصفها HTML ويحقنها في العنصر — ويُستخدم لمحتوى النص الغني.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<div v-html="htmlContent"></div>⚙️ الوسائط
| expression | سلسلة HTML (غير مُهرَّبة) |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The page shows bold and italic text — the HTML string is parsed and rendered.💡 نقاط مهمة
⚠️ تحذير استخدم v-html مع محتوى موثوق فقط: فهو لا يهرِّب شيئًا، ومدخلات المستخدم قد تفتح باب هجمات XSS.
⚠️ تحذير التوجيهات مثل v-bind داخل v-html لا تُترجَم أبدًا وبالتالي لن تعمل.
💡 نصيحة للنص العادي فضِّل v-text أو {{ }}؛ ولا تلجأ إلى v-html إلا عندما تحتاج فعلًا إلى ترميز HTML.
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل يشكّل v-html خطرًا أمنيًا؟
ج نعم. لا يهرِّب المحتوى، فالبيانات التي يتحكم بها المستخدم قد تمكّن من XSS. استخدمه مع HTML موثوق أو منقّى فقط.
س لماذا لا تعمل التوجيهات داخل v-html؟
ج يتجاوز HTML المحقون مُترجم القوالب، فتُتجاهل توجيهات مثل v-bind. استخدم بدلًا منها دوال العرض (render functions) أو المكوّنات.
س كيف أعرض النص الغني بأمان؟
ج نقِّ HTML (مثلًا عبر DOMPurify) قبل تمريره إلى v-html؛ وفضِّل v-text عندما لا تحتاج إلى تنسيقات.
