v-for
<body>
<ul class="todos">
<li v-for="(todo, index) in todos" :key="index">{{ todo.title }}</li>
</ul>
<script>
const vm = new Vue({
el: '#app',
data: {
todos: [
{ title: '아침 먹기' },
{ title: '점심 먹기' },
{ title: '저녁 먹기' }
]
}
</script>
</body>배열 변경 감지
Vue는 감시중인 배열의 변이 메소드를 래핑하여 뷰 갱신을 트리거한다
버튼을 누르면 4번째 인덱스가 추가되도록 push메서드 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="pushTodo">Push</button>
<ul class="todos">
<li v-for="(todo, index) in todos" :key="index">{{ todo.title }}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
todos: [
{ title: '아침 먹기' },
{ title: '점심 먹기' },
{ title: '저녁 먹기' }
]
},
methods: {
pushTodo() {
// this.todos[3] = { title: '야식먹기' }
this.todos.push({ title: '야식먹기' })
}
}
})
</script>
</body>
</html>
변이 메서드
- 배열 데이터를 갱신하거나 삭제할때는 자바스크립트의 변이 메서드를 사용해야 한다
push()배열의 가장 뒤에 새로운 요소를 추가해주는 메서드
pop()배열의 가장 뒤의 요소를 반환해주는 메서드
shift()배열의 가장 앞의 요소를 반환해주는 메서드
unshift()배열의 가장 앞에 요소를 추가해주는 메서드
splice()인덱스를 이용해서 요소를 추가하거나 삭제할 때 사용하는 메서드
sort()배열을 정렬해주는 메서드
reverse()배열을 뒤집어주는 메서드
배열 대체
- 변이 메소드는 호출된 원본 배열을 변형한다. 이와 비교하여 변형을 하지 않는 방법도 있다
filter()
concat()
slice() - 원본 배열을 변형하지 않고 항상 새 배열을 반환한다
🐢 💨 💨