التصيير الشرطي ​

v-if ​

السمة الموجهة v-if تستخدم لتصيير شرطي لكتلة من الشيفرة. سيتم تصيير الكتلة فقط إذا كان تعبير السمة الموجهة يعيد قيمة صحيحة.

<h1 v-if="awesome">Vue رائعة!</h1>

v-else ​

تستطيع استخدام السمة الموجهة v-else لتحديد "كتلة else" لـ v-if:

<button @click="awesome = !awesome">تبديل</button>

<h1 v-if="awesome">Vue رائعة!</h1>
<h1 v-else>أوه لا 😢</h1>

السمة v-else يجب أن تتبعها السمة الموجهة v-if أو السمة الموجهة v-else-if - وإلا فلن يتم التعرف عليها.

v-else-if ​

الموجهة v-else-if، كما يشير الاسم، تعمل ككتلة "else if" لـ v-if. يمكن استخدامها أيضًا بشكل متسلسل عدة مرات:

<div v-if="type === 'A'">
  أ
</div>
<div v-else-if="type === 'B'">
  ب
</div>
<div v-else-if="type === 'C'">
  ج
</div>
<div v-else>
  غير ذلك...
</div>

Similar to v-else, a v-else-if element must immediately follow a v-if or a v-else-if element.

v-if على <template> ​

Because v-if is a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use v-if on a <template> element, which serves as an invisible wrapper. The final rendered result will not include the <template> element.

<template v-if="ok">
  <h1>العنوان</h1>
  <p>الفقرة 1</p>
  <p>الفقرة 2</p>
</template>

v-else و v-else-if يمكن استخدامها أيضًا على <template>.

v-show ​

خيار آخر لعرض العنصر بشكل شرطي هو السمة v-show. الاستخدام مثل v-if هو نفسه إلى حد كبير:

<h1 v-show="ok">السلام عليكم</h1>

الفرق هو أن العنصر مع v-show سيُصيَّر دائمًا و يبقى موجودا في DOM؛ v-show يقوم فقط بتبديل خاصية display في الـCSS للعنصر.

v-show لا تدعم العنصر <template>، ولا يعمل أيضا مع v-else.

v-if مقابل v-show ​

v-if هو تصيير شرطي "حقيقي" لأنه يضمن أن مستمعي الأحداث والمكونات الفرعية داخل الكتلة الشرطية تُدمر وتُعاد إنشاؤها بشكل صحيح أثناء التبديلات.

v-if هي أيضا سمة "خاملة": إذا كان الشرط غير مستوفى (false) عند التصيير الأولي، فلن تقوم بأي شيء - لن يتم تصيير الكتلة الشرطية حتى يصبح الشرط مستوفى (true) للمرة الأولى.

بالمقارنة ، v-show تعتبر أبسط - يتم دائمًا تصيير العنصر بغض النظر عن الشرط الأولي، بالاستناد على التبديل المبني على CSS.

بشكل عام، v-if لديها تكاليف تبديل أعلى بينما v-show لديها تكاليف تصيير أولية أعلى. لذلك، استخدم v-show إذا كنت بحاجة إلى التبديل على عنصر معين بشكل متكرر جدًا، و v-if إذا كان الشرط غير مرجح أن يتغير في وقت التشغيل.

v-if مع v-for ​

When v-if and v-for are both used on the same element, v-if will be evaluated first. See the list rendering guide for details.