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

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

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

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


var laraveljs = new Vue({
	el: "#laravelApp",
	data: {
		items: [
			{ message: 'laravel.com' },
			{ message: 'shop.laravel.com' }
		]
	}
})

 

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

  • laravel.com
  • shop.laravel.com

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

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


var laraveljs = new Vue({
	el: "#laravelApp",
	data: {
		parentMessage: 'Parent',
		items: [
			{ message: 'hamyarlaravel.com' },
			{ message: 'shop.hamyarlaravel.com' }
		]
	}
})

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

  • Parent – 0 – hamyarlaravel.com
  • Parent – 1 – shop.hamyarlaravel.com

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

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

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

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

var laraveljs = new Vue({
	el: "#laravelApp",
	data: {
		items: [
			{ message: 'hamyarlaravel.com' },
			{ message: 'shop.hamyarlaravel.com' }
		]
	}
})

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

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

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

var laraveljs = new Vue({
	el: "#laravelApp",
	data: {
		object: {
			FirstName: 'Amin',
			LastName: 'Jafari',
			Age: 30
		}
	}
})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

laravelApp.items = laravelApp.items.filter(function(item){
	return item.message.match(/HamyarLaravel/)
})

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

برخی اوقات هم نیاز داریم اطلاعات و داده‌های دریافتی را به صورت منظم و مرتب بدون درنظر گرفتن هیچگونه متدی نمایش دهیم. در این شرایط می‌توان یک ویژگی محاسباتی (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 لذت برده باشید.