جلسه هفتم: دستور حلقه و لیست‌ها در Vue.js

در جلسه گذشته (ششم)، مباحث مربوط به دستورهای شرطی را که شامل دستورهای v-if, v-else-if, v-else و v-show بود، مورد بررسی قرار دادیم و در انتهای آموزش، به توضیح تفاوت بین دو دستور v-if و v-show پرداختیم. در این جلسه قصد داریم شما را با مفهوم جدید دستورهای نمایش لیست، حلقه‌ها و تکرارها آشنا کنیم. با ما همراه باشید.

دستور حلقه تکرار v-for

برای نمایش یک لیست از آیتم‌های درون یک آرایه می‌توان از دستور v-for استفاده کرد. این دستور از یک قالب و ساختار خاص پیروی می‌کند که به صورت item in items می‌باشد. در این عبارت، المان items منبع تمام داده‌های آرایه‌ای و item به عنوان یک نام مستعار برای تک تک المان‌های موجود در آرایه می‌باشد که در هر تکرار جایگزین می‌گردد:

استفاده عمومی

<ul id="roxoApp">
	<li v-for="item in items">
		{ item.message }
	</li>
</ul>


var roxojs = new Vue({
	el: "#roxoApp",
	data: {
		items: [
			{ message: 'roxo.ir' },
			{ message: 'ask.roxo.ir' },
			{ message: 'shop.roxo.ir' }
		]
	}
})

نتیجه خروجی کد بالا به صورت زیر خواهد بود:

• roxo.ir
• ask.roxo.ir
• shop.roxo.ir

درون بلوک v-for دسترسی کامل به تمام ویژگی‌های محدوده‌ی والد، خواهید داشت. همچنین v-for دارای یک آرگومان دوم است که برای نمایش ایندکس آیتم جاری مورد استفاده قرار می‌گیرد. مثال زیر مفهوم این دو سه خط نوشته را برای شما واضح تر بیان می‌کند:

<ul id="roxoApp">
	<li v-for="(item, index) in items">
		{{ parentMessage }} - {{ index }} - {{ item.message }}
	</li>
</ul>


var roxojs = new Vue({
	el: "#roxoApp",
	data: {
		parentMessage: 'Parent',
		items: [
			{ message: 'roxo.ir' },
			{ message: 'ask.roxo.ir' },
			{ message: 'shop.roxo.ir' }
		]
	}
})

خروجی کد بالا به صورت زیر خواهد بود:

• Parent - 0 - roxo.ir
• Parent - 1 - ask.roxo.ir
• Parent - 2 - shop.roxo.ir

توجه داشته باشید که شما می‌توانید از of به جای in استفاده کنید تا سینکس ساختاری شما برای تکرار و حلقه شبیه سینتکس ساختاری جاوا اسکریپت شود.

دستور حلقه v-for درون Templateها

همانند ساختار قالب‌ها (<template>) در جلسه گذشته و در بخش v-if، در اینجا نیز از تگ <template> به همراه دستور حلقه v-for برای رندر کردن چندین المان و بلوک، استفاده می‌کنیم. به مثال زیر توجه کنید:

<ul id="roxoApp">
	<template v-for="item in items">
		<li>{{item.message}}</li>
		<li class="divider"></li>
	</template>
</ul>

var roxojs = new Vue({
	el: "#roxoApp",
	data: {
		items: [
			{ message: 'roxo.ir' },
			{ message: 'ask.roxo.ir' },
			{ message: 'shop.roxo.ir' }
		]
	}
})

دستور حلقه‌ v-for درون شیء یا Object

همچنین شما می‌توانید دستور حلقه v-for را برای تکرار ویژگی‌های یک شیء مورد استفاده قرار بدهید. مانند مثال زیر:

<ul id="roxoApp">
	<li v-for="value in object">
		{{ value }}
	</li>
</ul>

var roxojs = new Vue({
	el: "#roxoApp",
	data: {
		object: {
			FirstName: 'Masoud',
			LastName: 'Salehi',
			Age: 40
		}
	}
})

خروجی کد بالا به صورت زیر خواهد بود:

• Masoud
• Salehi
• 40

علاوه بر این، می‌توان یک آرگومان دوم به دستور حلقه v-for برای اشیاء اضافه کرد. این آرگومان key نام دارد. این آرگومان نام متغییری که داخل شیء برای آن مقدار تعریف شده است را نمایش می‌دهد. به مثال زیر توجه کنید:

<div v-for="(value, key) in object">
	{{ key }} : {{ value }}
</div>

همچنین آرگومان سومی به این دستور حلقه اضافه می‌شود که ایندکس هر آیتم را بر می‌گرداند. مثال زیر را ملاحظه بفرمایید:

<div v-for="(value, key, index) in object">
	{{ index }}, {{ key }} : {{ value }}
</div>

عددشمار در v-for

با استفاده از دستور حلقه v-for می‌توان یک شمارنده عددی ایجاد کرد که به صورت خودکار شمارش می‌کند. در نظر داشته باشید این شمارش روی المان جاری صورت می‌گیرد. مثال:

<div>
	<span v-for="n in 10">{{ n }}</span>
</div>

نتیجه خروجی بالا به صورت ذیل خواهد بود:

1 2 3 4 5 6 7 8 9 10

کامپوننت‌ها و دستور حلقه v-for

توجه: در این بخش فرض کرده‌ایم شما با کامپوننت‌های Vue.js آشنایی کامل دارید. اگر نیاز به آموزش بخش کامپوننت‌های Vue.js دارید یا از طریق این لینک، آن را مطالعه کنید یا این بخش را رد کرده و بعدا به آن مراجعه کنید.

دستور حلقه‌ی v-for را می‌توان درون کامپوننت‌های دلخواه استفاده کرد. این موضوع دقیقا شبیه یک المان می‌باشد. به کد زیر توجه کنید:

<roxo-component v-for="item in items"></roxo-component>

توجه دارید که کد بالا به دلیل ایزوله بودن محدوده‌ی کامپوننت، به صورت اتوماتیک اطلاعات و داده‌ها را به ارسال نمی‌کند. برای ارسال داده‌های تکرار شونده به کامپوننت‌ها باید از ویژگی‌ها استفاده کنید. مثال زیر را ملاحظه بفرمایید:

<roxo-component
	v-for="(item, index) in items"
	v-bind:item="item"
	v-bind:index="index">
</roxo-component>

کار با آرایه‌ها در Vue.js

روش‌های تغییر آرایه‌ها به شکل‌های مختلف توسط Vue.js اجرا می‌شود که زیر لیستی از آنها آورده شده است:

• push() : اضافه کردن یک مقدار به انتهای آرایه‌
• pop() : حذف کردن آخرین المان آرایه
• shift() :  حذف اولین المان آرایه
• unshift() : اضافه کردن یک مقدار به ابتدای آرایه
• splice() : اضافه یا حذف کردن یک مقدار به آرایه
• sort() : منظم کردن المان‌های آرایه
• reverse(): معکوس کردن المان‌های یک آرایه

جایگزینی یک آرایه

درنظر داریم که توابع معرفی شده در قسمت قبل، تنها روی آرایه‌ی مشخص عملیات حذف یا اضافه کردن را انجام می‌دهد. برخی مواقع متدهایی وجود دارند که با اعمال آنها روی آرایه‌ها، یک آرایه جدید تولید و بازگردانده می‌شود. هنگامیکه از متدهای تغییرناپذیر استفاده می‌کنید، می‌توانید ارایه جدید را با آرایه قدیم جایگزین نمایید. به مثال زیر توجه کنید:

roxoApp.items = roxoApp.items.filter(function(item){
	return item.message.match(/Roxo/)
})

نمایش نتایج منظم و فیلترشده

برخی مواقع نیاز داریم اطلاعات و داده‌های دریافتی را به صورت منظم و مرتب بدون درنظر گرفتن هیچگونه متدی نمایش دهیم. در این شرایط می‌توان یک ویژگی محاسباتی (Computed) ایجاد کرد و آرایه‌ها را درون آن مرتب و یا فیلتر کرد. مثال زیر را مطالعه بفرمایید:

<li v-for="n in evenNumber">{{ n }}</li>

data:{
	numbers: [1, 2, 3, 4, 5]
},
computed:{
	evenNumber: function(){
		return this.numbers.filter(function(number){
			return number % 2 === 0
		})
	}
}

در این مثال تنها اعداد زوج آرایه به نمایش گذاشته خواهد شد. همچنین این مثال را می‌توان، به صورت کد زیر و با استفاده از متدها (methods) اجرا کرد:

<li v-for="n in even(numbers)">{{ n }}</li>

data:{
	numbers: [1, 2, 3, 4, 5]
},
methods: {
	even: function(){
		return this.numbers.filter(function(number){
			return number % 2 === 0
		})
	}
}

جامع ترین دوره آموزشی Vue.js 2.0 در ایران را می توانید از طریق اینجا مشاهده کنید.