Vue-те массивтердің реактивтілігі

Реактивтілік тіпті v-for арқылы шығарылатын массивтердің өзгеруі кезінде де іске қосылады. Мысал ретінде түймені басқан кезде массивке жаңа элемент реактивті түрде қосылып, өзгерістер бірден экранда көрінетіндей етейік.

Сипатталғанды жүзеге асырайық. Бізде мынадай массив болсын:

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

Осы массив элементтерін циклде шығарайық:

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

Массивке жаңа элемент қосатын түймені жасайық:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">add</button>
</template>

Сәйкес әдісті жүзеге асырайық:

methods: {
	add: function() {
		this.arr.push('xxx');
	}
}

Түйме берілген. Массив берілген. Осы массив элементтерін ul тізімі түрінде шығарыңыз. Түймені басқан кезде осы тізімнің соңына жаңа жол қосылатындай етіңіз.

Түйме берілген. Массив берілген. Осы массив элементтерін ul тізімі түрінде шығарыңыз. Түймені әр басқан сайын тізімнің бірінші жолы жойылатындай етіңіз.

Түйме берілген. Массив берілген. Осы массив элементтерін ul тізімі түрінде шығарыңыз. Түймені әр басқан сайын тізімнің соңғы жолы жoyылатындай етіңіз.

Түйме берілген. Массив берілген. Осы массив элементтерін ul тізімі түрінде шығарыңыз. Түймені әр басқан сайын тізімнің соңғыдан алдыңғы жолы жойылатындай етіңіз.

Түйме берілген. Массив берілген. Осы массив элементтерін ul тізімі түрінде шығарыңыз. Түймені басқан кезде тізім жолдары сұрыпталатындай етіңіз.

Түйме берілген. Массив берілген. Осы массив элементтерін ul тізімі түрінде шығарыңыз. Түймені басқан кезде тізім жолдары кері ретпен орналасатындай етіңіз.

Ерекшеліктер

JavaScript шектеулеріне байланысты, Vue массивтегі келесі өзгерістерді байқай алмайды: индекс бойынша элементті тікелей тағайындау: items[кілт] = жаңаМән және массив ұзындығын анық өзгерту, мысалы: items.length = жаңаҰзындық.