إذا كان لدي صورة شخصية للـ user في موقعي وأريد في كل مرة يتم فيها تسجيل دخول مستخدم أن تظهر صورته الشخصية يعني الصورة تتغير حسب الشخص.
<img src="profil.jpg" >
بهذا الشكل لن نستطيع التعديل على ميزة src فهي قيمة نصية ثابتة.
إذا كيف يمكن أن نجعل هذه القيمة متغيرة حسب البيانات القادمة؟
تتيح لي vue من خلال خاصية v-bind أن أتحكم بميزات الhtml داخل الـ tags مثل : src , title, class , id … الخ
<img v-bind:src="img" >
بهذا الشكل يصبح ما بين القوسين عبارة عن بيانات ويمكن أيضاً أن نستخدم تعليمات javascript بكل سهولة.
مثلا لو مررنا قيمة للمتغير img ضمن الـ data :
data: {
img: "profil.jpg"
}
وهكذا يتم تمرير قيمة لتظهر كصورة على المتصفح.
توجد طريقة كتابة مختصر للـ v-bind حيث نضع : قبل الميزة بهذا الشكل:
<img :src="img" >
وبنفس الطريق يمكنكم ان تتحكموا بأي ميزة في الـ HTML
في هذا المقطع تجدون التفاصيل:
وايضاُ تجدون الكود الخاص في الدرس على gitHub على الرابط:
