برای جاوا اسکریپت فریم ورک های زیادی نوشته شده از جمله Angular، React و … اما Vue.js چیز دیگری است. محبوبیت این فریم ورک در میان برنامه نویسان بسیار زیاد است. از جمله دلایل محبوبیت Vue.js سادگی آن است. این فریم ورک پیچیدگی های فریم ورک های دیگر را ندارد و به سرعت می توان آن را یاد گرفت.
خوب بریم سر اصل مطلب، یک دستور شرطی ساده را مرور می کنیم و در نهایت استفاده از setTimeout را یاد میگیریم. تمام کدهایی که قراره بنویسیم به شکل زیر است.
<!DOCTYPE html>
<html>
<head>
<title>condition</title>
</head>
<body>
<div id="app">
<template v-if="count > 1">
{{message}}
</template>
<template v-else>
not greater than 1
</template>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
count: 1,
message:'simple condition',
},mounted(){
setTimeout(()=>{
this.count = 20
},5000);
}
});
</script>
</body>
</html>
ابتدا از بخش vue.js شروع می کنیم. یعنی از خط 19 به بعد. خوب اولین کاری که کردیم این است که cdn مربوط به vue.js را فراخوانی کردیم. البته خیلی راحت میتوانید فایل vue.js را دانلود کنید و با لینک مستقیم از آن استفاده کنید. دربخش بعدی یعنی با let app = new Vue یک Instance جدید از vue.js میسازیم و در متغیر app ذخیره میکنیم. در خط 23 با el (element) آی دی مورد نظر را در محتوای html مشخص میکنیم. و در بخش data هم دو متغیر با نام های count و message را تعریف کردیم و به هر یک مقادیر لازم را دادیم.
و در نهایت با دستور setTimeout این طور تعریف می کنیم که بعد از 5000 میلی ثانیه یعنی 5 ثانیه بعد از اجرا شدن برنامه مقدار متغیر count را تغییر داده و برابر با 20 قرار بده.
v-if و v-else در vue.js
حالا بریم سراغ کدهای html، کاملا مشخصه که با v-if یک دستور شرطی را شروع کردیم. که اگر count بزرگتر از 1 بود message را نشان بده و در غیر این صورت یعنی v-else پیغام not greater than 1 را چاپ کن. بعد از اجرا شدن برنامه 5 ثانیه صبر کنید. خواهید دید که پیغام صفحه به simple condition تغییر می یابد.
نوشتن توضیح برای این جور کدها یکم سخته. فقط امیدوارم قابل فهم توضیح داده باشم. و برای شما مفید باشه. برای دیدن نتیجه عملی برنامه هم کدها را در jsfiddle بارگذاری کردم که در زیر می بینید. Result را انتخاب کنید و نتیجه را صورت عملی مشاهده کنید.