تعلم vue js ببساطة - الدرس السادس - العوامل الشرطية

[sohep]

إذا كنت زائر جديد لمجتمع كورتابز ولم تسجل في الموقع بعد من المؤكد أن هذا الصورة ظهرت لك في الأعلى

وإذا كنت من الأعضاء الموجودين في المجتمع ولديهم حساب في الموقع أكيد ظهر لك في الأعلى كهذه الصورة

في كلا الحالتين الشريط نفسه لكن في الحالة الأولى تم اظهار زر تسجيل الدخول واخفاء الصورة الشخصية وفي الحالة الثانية تم اظهار الصورة الشخصية واخفاء زر تسجيل الدخول. ما الذي يحصل هنا ؟؟؟

نعم كما خطر في ذهنك نحن في حضرة العوامل الشرطية

العوامل الشرطية في vue js

يتم استخدام العوامل الشرطي عادة في الأماكن التي نريد تبادل الظهور بين عنصريين أو أكثر بحيث يكون ظهورها مرتبط بشرط معين.
ففي مثالنا أعلاه الأمر متعلق بتسجيل الدخول وهنا يتم ربط العنصر بمتغير ليكن مثلاً isLogin وهذا يقبل إما true ويعني مسجل دخول وإما false ويعني غير مسجل دخول.

<div id="app">
    <h1 v-if="isLogin">تسجيل الدخول</h1>
    <h1 v-else-if="!isLogin">الصفحة الرئيسية</h1>
    
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isLogin : false
              }
    })
</script>

وتستخدم أيضا v-else لتغطي باقي الاحتمالات الأخرى

معلومة

العوامل الشرطية من نوع v-if وملحقاتها تقوم بحذف عنصر الـ html بشكل نهائي في حال لم يتحقق الشرط ولا تقوم بإخفائه من خلال الأمر display: none في الـ css، وهنالك من يقوم بذلك وهو الأمر v-show

لتفاصيل أكثر يمكنم متابعة الدرس على اليوتيوب:

تعلم Vue js ببساطة - العوامل الشرطية - الدرس السادس

يمكنكم متابعة جميع الدروس من خلال الفهرس
فهرس سلسلة تعلم vue js ببساطة

[abdallahmiri]

رائع Vue بسيط، شكراً

[sohep]

العفو عزيزي @abdallahmiri
هل انت تتعلم vue جديد؟

[abdallahmiri]

اريد الدخول بس بركز على java script حاليا، من شرحك بسيط والتطبيقات المبنية بال Vue الأداء رائع

[sohep]

ربنا يوفقك
اي مساعدة نحنا موجودون.

[abdallahmiri]

app_6 https://codepen.io/Abdallah-Mohame/pen/oNbBEZW?editors=1000

[sohep]

يمكنك ايضا ان تضيف زر للتبديل بينها اذا اردت

[abdallahmiri]

بدوس بيشتغل مش عارف صح ولا https://codepen.io/Abdallah-Mohame/pen/oNbBEZW?editors=1000

    var app = new Vue({
        el: "#app",
        data: {
          isLogin: true,
        },
        methods: {
          click() {
            this.isLogin === true ? this.isLogin = false : this.isLogin = true
          }
        }      
    })

[sohep]

ممتاز
يعمل بشكل نظامي