العرض الشرطي في Vue.js

يتيح لك العرض المشروط في Vue.js عرض العناصر أو إخفائها ديناميكيًا استنادًا إلى شروط معينة. تعد هذه الميزة ضرورية لإنشاء واجهات مستخدم سريعة الاستجابة وتفاعلية. يوفر Vue.js العديد من التوجيهات للتعامل مع العرض المشروط، مما يتيح لك إدارة إمكانية رؤية العناصر في تطبيقك بكفاءة.

توجيه v-if

يتم استخدام التوجيه v-if لعرض العناصر بشكل مشروط بناءً على صدق تعبير ما. إذا تم تقييم التعبير إلى true، فسيتم عرض العنصر؛ وإلا، فلن يتم تضمينه في DOM. فيما يلي مثال أساسي:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

في هذا المثال، يتم عرض عنصر الفقرة فقط إذا كان isVisible يساوي true. يؤدي النقر فوق الزر إلى تبديل قيمة isVisible وبالتالي التحكم في رؤية الفقرة.

التوجيه v-else

يمكن استخدام التوجيه v-else بالتزامن مع v-if لتحديد كتلة بديلة من المحتوى لعرضها عندما يكون الشرط v-if هو false. فيما يلي مثال:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

في هذا المثال، عندما تكون قيمة isVisible هي true، يتم عرض الفقرة الأولى. وعندما تكون قيمة isVisible هي false، يتم عرض الفقرة الثانية بدلاً منها.

التوجيه v-show

يتيح لك التوجيه v-show أيضًا عرض العناصر بشكل مشروط، ولكنه يختلف عن v-if في أنه يبدل بين إمكانية رؤية العنصر باستخدام خاصية CSS display بدلاً من إضافته أو إزالته من DOM. يمكن أن يكون هذا أكثر كفاءة إذا كنت بحاجة إلى تبديل إمكانية رؤية عنصر بشكل متكرر.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

في هذا المثال، يتحكم التوجيه v-show في إمكانية رؤية الفقرة من خلال تعيين الخاصية display الخاصة بها. يظل العنصر في DOM ولكنه مخفي أو معروض بناءً على القيمة isVisible.

التوجيه v-else-if

يتم استخدام التوجيه v-else-if لإنشاء سلسلة "else if" في منطق العرض الشرطي الخاص بك. وهو يسمح لك بتحديد شروط إضافية لتقييم ما إذا كان الشرط v-if السابق غير مستوفٍ. فيما يلي مثال:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

في هذا المثال، يعتمد المحتوى المعروض على قيمة الخاصية status. تُستخدم التوجيهات v-if وv-else-if وv-else للتعامل مع حالات مختلفة.

خاتمة

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

شرطي عرض عرض إذا عرض وإلا الرؤية البيانات dom القوالب المنطق التفاعل العرض الكفاءة