Kuvunja Arrays katika Vue

Vue inaruhusu kuunda vitaki kwa mzunguko. Hii inafanywa kwa kutumia derectiva maalum v-for. Hebu tuangalie, inavyofanya kazi kwa arrays. Ili kufanya hivyo, tutafanya array ifuatayo:

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

Wacha tuonyeshe kila kipengele cha array hii kwenye aya tofauti. Ili kufanya hivyo kwenye muonekano kwanza tufanye aya:

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

Sasa tuandikie aya yetu derectiva v-for. Thamani ya derectiva hii inapaswa kuonyeshwa jina la array inayovunjwa na kigeu, ambacho kwa mfuatano kitaingia vitu vya hii array. Kwa upande wetu jina la array litakuwa arr, na kwa kigeu tutaunda jina elem:

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

Matokeo yake, aya yetu itarudiwa mara kadiri ya idadi ya vipengele katika array yetu. Wacha tuonyeshe vipengele vinavyovunjwa kwenye maandishi ya ayah zetu:

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

Acha katika data kuhifadhiwe array ifuatayo:

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

Onyesha kila kipengele cha hii array kwenye kitaki chake div.

Imetolewa array ifuatayo:

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

Onyesha mraba wa kila kipengele cha array hii kwenye kitaki chake div.

Imetolewa array ifuatayo:

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

Onyesha vipengele vya hii array kwa umbo la orodha ul.