v-text توجيه المحتوى النصي
آخر تحديث: 2026-10-22
v-text توجيه المحتوى النصي
يضبط v-text الخاصية textContent للعنصر من قيمة التعبير. وهو يعادل الاستيفاء بالأقواس المزدوجة لكنه يستبدل كامل محتوى العنصر.
| المجموعة | التوجيهات |
|---|---|
| النوع | توجيه |
| النطاق | القالب |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
<p v-text="msg"></p>
<p v-text="msg"></p>
<!-- equivalent to -->
<p>{{ msg }}</p>⚙️ الوسائط
| expression | أي تعبير؛ تُحوَّل نتيجته إلى نص تصبح محتوى العنصر |
|---|
القيمة المُرجعة：توجيه، بلا قيمة مُعادة
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Both paragraphs show Hello Vue! — v-text behaves exactly like interpolation.💡 نقاط مهمة
ℹ️ ملاحظة يستبدل v-text المحتوى الموجود؛ وفضّل {{ }} إذا كنت تحتاج الاستيفاء في جزء فقط.
💡 نصيحة القيمة نص عادي — لا تُفسَّر وسوم HTML (استخدم v-html لذلك).
⚠️ تحذير يشارك v-text خاصية التهريب في {{ }}، لذا تُعرض وسوم HTML في البيانات كما هي — وهو أمر جيد للحماية من XSS.
🏷️ التوجيهات ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين v-text والاستيفاء بالأقواس المزدوجة؟
ج الناتج واحد؛ لكن v-text يستبدل كامل محتوى العنصر بينما يملأ {{ }} موضعه فقط، ما يجعل الاستيفاء أكثر مرونة في النصوص المختلطة.
س هل تُعرض وسوم HTML الموجودة في البيانات؟
ج لا. كلا من v-text و{{ }} يهرِّب HTML؛ فتُعرض الوسوم كما هي — وهي الحماية المدمجة من XSS.
س متى أستخدمه بدلًا من الاستيفاء؟
ج استخدمه عندما يحتوي العنصر على نص واحد فقط ولا شيء غيره، للحصول على ترميز أقصر.
