1. v-for 로 map이나 forEach 역할을 할 수 있다.
<Card
v-for="person of people"
v-bind:key="person.id"
v-bind:name="person.name"
v-bind:hobby="person.hobby"
/>2. Card 컴포넌트 구현
const Card = {
props: {
name: String,
hobby: String,
},
template: `
<h1>{{ name }}</h1>
<h2>{{ hobby }}</h2>
`,
};3. 부모App에서 Card 컴포넌트 사용
const App = {
data() {
return {
people: [
{
id: 1,
name: 'Wendy',
hobby: '자전거',
},
{
id: 2,
name: '박유진',
hobby: '노래',
},
{
id: 3,
name: '한수빈',
hobby: '독서',
},
],
};
},
components: {
Card,
},
methods: {
addPerson() {
this.people.push({
id: 4,
name: '장원영',
hobby: '춤',
});
},
},
};
[전체 예시 코드]
<!DOCTYPE html>
<html>
<head>
<title>Example 05</title>
</head>
<body>
<div id="app">
<Card
v-for="person of people"
v-bind:name="person.name"
v-bind:hobby="person.hobby"
/>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
const Card = {
props: {
name: String,
hobby: String,
},
template: `
<h1>{{ name }}</h1>
<h2>{{ hobby }}</h2>
`,
};
const App = {
data() {
return {
people: [
{
id: 1,
name: 'Wendy',
hobby: '자전거',
},
{
id: 2,
name: '박유진',
hobby: '노래',
},
{
id: 3,
name: '한수빈',
hobby: '독서',
},
],
};
},
components: {
Card,
},
methods: {
addPerson() {
this.people.push({
id: 4,
name: '장원영',
hobby: '춤',
});
},
},
};
Vue.createApp(App).mount('#app');
</script>
</html>
[실행 결과]
'programming > Vue' 카테고리의 다른 글
| [Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기 (0) | 2022.03.03 |
|---|---|
| [Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기 (0) | 2022.03.03 |
| [Vue.js] #3 컴포넌트 생명주기 / v-if 속성 사용 (0) | 2022.03.03 |
| [Vue.js] #2 부모 - 자식 관계 컴포넌트 구현 (0) | 2022.03.03 |
| [Vue.js] #1 시작하기 (0) | 2022.03.03 |
