Massiivide läbimine Vues

Vue võimaldab silmuse abil teppe luua. Seda tehakse spetsiaalse direktiivi v-for abil. Vaatame, kuidas see massiivide puhul töötab. Selleks loome järgmise massiivi:

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

Väljastame iga selle massiivi elemendi eraldi lõigus. Selleks teeme kõigepealt esituses lõigu:

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

Kirjutame nüüd meie lõigule direktiivi v-for. Selle direktiivi väärtuseks tuleb määrata läbitava massiivi nimi ja muutuja, millesse järjestikku need massiivi elemendid satuvad. Meie puhul on massiivi nimi arr, ja muutuja jaoks mõtleme välja nime elem:

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

Tulemusena kordub meie lõik nii mitu korda, kui palju elemente meie massiivis on. Väljastame läbitavad elemendid meie lõikude tekstis:

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

Olgu data-s salvestatud järgmine massiiv:

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

Väljastage iga selle massiivi element omaendas div tegis.

Antud on järgmine massiiv:

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

Väljastage iga elemendi ruut sellest massiivist omaendas div tegis.

Antud on järgmine massiiv:

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

Väljastage selle massiivi elemendid loendina ul.