في الدرس السابق قمنا بإضافة تحدي بسيط التحدي الأول كان الهدف منه تطبيق أهم ما تعلمناه خلال الدروس الستة الأولى.
التطبيق هو عبارة عن نص نريد أن نبدله بين اللغة الإنكليزية والعربي مع تغيير التنسيق
سوف نقسم الحل إلى ثلاث أقسام:
القسم الأول
نجهز المعطيات الخاصة بال html من خلال إضافة وسم h1 خاص باللغة العربية ووسم h1 أخر خاص باللغة الإنكليزية:
<div>
<h1>hello world</h1>
<h1>مرحباً بالعالم</h1>
</div>
ثم نعرف متغير مهمته التبديل بين اللغتين لنسميه lang
وهو ياخذ قيمة نصية إما "ar"
أو "en"
ونضع بعدها شروط كما مر معنا في درس العوامل الشرطية بحيث نجعل النص العربي يظهر مع قيمة "ar"
ويظهر النص الإنكليزي عند القيمة "en"
<div id="app">
<div>
<h1 v-if="lang == 'en'">hello world</h1>
<h1 v-else-if= " lang== 'ar'">مرحباً بالعالم</h1>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
lang : 'en'
}
})
</script>
القسم الثاني
نريد ان نضيف الزر الخاص بالتبديل بين اللغتين ومهمته حين الضغط عليه هي تبديل قيمة المتغير lang
من "ar"
إلى "en"
وبالعكس كما اخذنا في درس الاحداث وأيضا نغير اسم الزر وفقا لقيمة lang
على الشكل التالي:
.
.
<button @click="changed">{{lang == 'en' ? 'العربية' : "English"}}</button>
.
.
methods:{
changed(){
if (this.lang == 'en') {
this.lang = 'ar'
}
else {
this.lang = 'en'
}
}
القسم الثالث
هي اضافة التنسيق من خلال اضافة كلاسين والتبديل بينهم ليكون الكلاس الأول اسمه ara والثاني eng
<style>
.ara{
text-align: right;
direction: rtl;
}
.eng{
text-align: left;
direction: ltr;
}
</style>
ونقوم بالتبديل بينهما من خلال خاصية v-bind وسوف نطبقها على الـ class كما مر معنا في درس الـ v-bind:class
<div :class="{'ara': lang == 'ar' , 'eng': lang == 'en'}">
<h1 v-if="lang == 'en'">hello world</h1>
<h1 v-else-if= " lang== 'ar'">مرحباً بالعالم</h1>
</div>
ليصبح لدينا الكود كامل بهذا الشكل:
الكود كامل
<div id="app">
<div :class="{'ara': lang == 'ar' , 'eng': lang == 'en'}">
<h1 v-if="lang == 'en'">hello world</h1>
<h1 v-else-if= " lang== 'ar'">مرحباً بالعالم</h1>
</div>
<button @click="changed">{{lang == 'en' ? 'العربية' : "English"}}</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
lang : 'en'
},
methods:{
changed(){
if (this.lang == 'en') {
this.lang = 'ar'
}
else {
this.lang = 'en'
}
}
}
})
</script>
<style>
.ara{
text-align: right;
direction: rtl;
}
.eng{
text-align: left;
direction: ltr;
}
</style>
لتفاصيل أكثر يمكنم متابعة الدرس على اليوتيوب:
يمكنكم متابعة جميع الدروس من خلال الفهرس
فهرس سلسلة تعلم vue js ببساطة