728x90
반응형
v-for 특징
- alias in expression 형식의 특수 구문을 사용하여 반복되는 현재 요소에 대한 별칭(alias) 제공
<div v-for="item in items">
{{ item.text }}
</div>
- 배열에서 인덱스에 대한 별칭을 지정할 수 있음
<body>
<div id="app">
<div v-for="(item, index) in myArr">{{ index }} / {{ item.name }}</div>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const myArr = ref([
{ name: "Alice", age: 20 },
{ name: "Bella", age: 21 },
]);
return {
myArr,
};
},
});
app.mount("#app");
</script>
</body>
- 객체에서는 키, 인덱스에 대한 별칭을 지정할 수 있음
<body>
<div id="app">
<div v-for="(value, key, index) in myObj">{{ index }} / {{ key }} / {{ value }}</div>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const myObj = ref({
name: "Cathy",
age: 30,
});
return {
myObj,
};
},
});
app.mount("#app");
</script>
</body>
여러 요소에 대한 v-for 적용
- template 요소에 v-for을 적용하여 하나 이상의 요소에 반복 렌더링 할 수 있음
<body>
<div id="app">
<ul>
<template v-for="item in myArr">
<li>{{ item.name }}</li>
<li>{{ item.age }}</li>
<hr />
</template>
</ul>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const myArr = ref([
{ name: "Alice", age: 20 },
{ name: "Bella", age: 21 },
]);
return {
myArr,
};
},
});
app.mount("#app");
</script>
</body>
중첩된 v-for
- 각 v-for 범위는 상위 범위에 접근할 수 있다.
<body>
<div id="app">
<ul v-for="item in myInfo">
<li v-for="friend in item.friends">{{ item.name }} - {{ friend }}</li>
</ul>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const myInfo = ref([
{ name: "Alice", age: 20, friends: ["Bella", "Cathy", "Dan"] },
{ name: "Bella", age: 21, friends: ["Alice", "Cathy"] },
]);
return {
myInfo,
};
},
});
app.mount("#app");
</script>
</body>
v-for와 key
- 데이터의 예측 가능한 행동을 유지하기 위해 반드시 v-for와 key를 함께 사용해야 한다!!
- key는 반드시 각 요소에 대한 고유한 값을 나타낼 수 있는 식별자여야 한다.
<body>
<div id="app">
<div v-for="item in items" :key="item.id">
{{item.id}} - {{item.name}}
</div>
</div>
<script>
const { createApp, ref, computed } = Vue;
const app = createApp({
setup() {
let id = 0;
const items = ref([
{ id: id++, name: "Alice" },
{ id: id++, name: "Bella" },
]);
return {
items,
};
},
});
app.mount("#app");
</script>
</body>v-for with v-if
- 동일 요소에 v-for와 v-if를 함께 사용하지 않는다.
- 동일한 요소에서 v-if가 v-for보다 우선순위가 더 높기 때문
- v-if 조건은 v-for 범위의 변수에 접근할 수 없다.
문제 상황) v-if가 더 높은 우선순위를 가지므로 v-for의 todo 요소를 v-if에서 사용할 수 없음
<ul>
<li v-for="todo in todos" v-if="!todo.isComplete" :key="todo.id">{{ todo.name }}</li>
</ul>
-> v-for와 template 요소를 사용하여 v-if 이동
<ul>
<template v-for="todo in todos" :key="todo.id">
<li v-if="!todo.isComplete">{{ todo.name }}</li>
</template>
</ul>
728x90
반응형
'Frontend > Vue3' 카테고리의 다른 글
| [Vue3] Lifecycle Hooks (0) | 2024.05.06 |
|---|---|
| [Vue3] watch (0) | 2024.05.06 |
| [Vue3] 조건부 렌더링 (v-if, v-show) (0) | 2024.05.06 |
| [Vue3] Computed Property (0) | 2024.05.06 |
| [Vue3] Form 입력 바인딩 (v-model) (0) | 2024.05.05 |
