Vue-ში მასივების გადაყოლა

Vue საშუალებას აძლევს ტეგების ფორმირებას ციკლში. ეს კეთდება სპეციალური დირექტივის v-for საშუალებით. ვნახოთ, როგორ მუშაობს ის მასივებისთვის. ამისთვის შევქმნათ შემდეგი მასივი:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

გამოვიტანოთ ამ მასივის თითოეული ელემენტი ცალკე აბზაცში. ამისთვის წარმოდგენაში თავიდან შევქმნათ აბზაცი:

<template>
	<p></p>
</template>

ახლა დავუწეროთ ჩვენს აბზაცს დირექტივა v-for. ამ დირექტივის მნიშვნელობად უნდა მივუთითოთ გადასაყოლებელი მასივის სახელი და ცვლადი, რომელშიც თანმიმდევრულად შევა ამ მასივის ელემენტები. ჩვენს შემთხვევაში მასივის სახელი იქნება arr, ხოლო ცვლადისთვის ჩვენ შევიგონებთ სახელს elem:

<template>
	<p v-for="elem in arr"></p>
</template>

შედეგად ჩვენი აბზაცი განმეორდება იმდენჯერ, რამდენი ელემენტიც არის ჩვენს მასივში. გამოვიტანოთ გადაყოლილი ელემენტები ტექსტში ჩვენი აბზაცების:

<template>
	<p v-for="elem in arr">{{ elem }}</p>
</template>

დაე, data-ში ინახებოდეს შემდეგი მასივი:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

გამოიტანეთ ამ მასივის თითოეული ელემენტი საკუთარ div ტეგში.

მოცემულია შემდეგი მასივი:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

გამოიტანეთ ამ მასივის თითოეული ელემენტის კვადრატი საკუთარ div ტეგში.

მოცემულია შემდეგი მასივი:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

გამოიტანეთ ამ მასივის ელემენტები სიის ul სახით.