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 목록 형태로 출력하세요. 버튼을 클릭할 때마다 목록의 마지막 항목이 삭제되도록 만드세요.

버튼이 주어져 있습니다. 배열이 주어져 있습니다. 이 배열의 요소들을 ul 목록 형태로 출력하세요. 버튼을 클릭할 때마다 목록의 끝에서 두 번째 항목이 삭제되도록 만드세요.

버튼이 주어져 있습니다. 배열이 주어져 있습니다. 이 배열의 요소들을 ul 목록 형태로 출력하세요. 버튼을 클릭하면 목록 항목들이 정렬되도록 만드세요.

버튼이 주어져 있습니다. 배열이 주어져 있습니다. 이 배열의 요소들을 ul 목록 형태로 출력하세요. 버튼을 클릭하면 목록 항목들이 역순으로 배치되도록 만드세요.

예외 사항

JavaScript의 제약으로 인해 Vue는 배열에서 다음과 같은 변경 사항을 감지할 수 없습니다: 인덱스를 통한 요소의 직접 설정: items[키] = 새값 및 배열 길이의 명시적 변경, 예: items.length = 새길이.