Lussing van skikkings in Vue

Vue laat toe dat etikette in 'n lus gevorm word. Dit word gedoen met behulp van die spesiale richtlyn v-for. Kom ons kyk hoe dit werk vir skikkings. Om dit te doen, maak ons die volgende skikking:

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

Kom ons druk elke element van hierdie skikking in 'n aparte paragraaf uit. Om dit te doen in die vertoning maak ons eers 'n paragraaf:

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

Skryf nou vir ons paragraaf die richtlyn v-for. Die waarde van hierdie richtlyn moet die naam van die geskikte skikking en die veranderlike aandui, waar die elemente opeenvolgend van hierdie skikking sal beland. In ons geval sal die naam van die skikking arr wees, en vir die veranderlike sal ons die naam elem bedink:

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

As gevolg hiervan sal ons paragraaf herhaal soveel keer as daar elemente in ons skikking is. Kom ons sal die geluste elemente in die teks uitsit van ons paragrawe:

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

Laat die volgende skikking in data gestoor word:

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

Druk elke element van hierdie skikking in sy eie div etiket uit.

Die volgende skikking word gegee:

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

Druk die kwadraat van elke element van hierdie skikking in sy eie div etiket uit.

Die volgende skikking word gegee:

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

Druk die elemente van hierdie skikking uit in die vorm van 'n ul lys.