v-for
v-for 는 템플릿에서 for 돌리므로 구조에 변화를 주어 새로 for를 돌려야 할 때는 리렌더링을 해주어야 한다.
<!-- v-for에 동적인 데이터(배열) 사용 -->
<body>
<ul id="app">
<li v-for=' (no, i) in arr '>
<button @click=' remove(i) '>X</button> {{ no }}
</li>
<li>
<button @click=' append(1) '>+1</button>
<button @click=' append(5) '>+5</button>
<button @click=' append(10) '>+10</button>
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
cur: 0,
arr: []
},
methods: {
append: function(x){
for(let i=0; i<x; i++){
this.arr.push( ++this.cur );
}
},
remove: function(index){
this.arr.splice(index, 1);
}
}
});
</script>
</body>위의 예제처럼 v-for를 반응형 데이터(arr)를 지정하고, 배열 내부의 아이템을 제어(push, splice)하는 메소드를 사용하면 요소 변화가 생길때 자동으로 화면을 다시 랜더링합니다.
배열 메소드 기능
.push() 요소를 추가할 때 사용합니다.
.pop() 마지막 인덱스의 요소를 제거할 때 사용합니다.
.shift() 배열의 요소를 왼쪽(idx+)으로 밀때 사용합니다.
.unshift() 배열의 요소를 오른쪽(idx-)으로 밀때 사용합니다.
.splice() 배열의 일정 부분의 요소를 제거할때 사용합니다.
.sort() 배열의 요소를 정렬할때 사용합니다.
.reverse() 배열의 요소 순서를 반대로 뒤집을때 사용합니다.
Just Do It