Vue.js 에서 v-for 객체배열을 통해 반복문을 연습하기 예제입니다.
<template>
<main>
<h1>반복문 사용하기</h1>
<table>
<thead>
<tr>
<th>제품명</th>
<th>가격</th>
<th>카테고리</th>
<th>배송료</th>
</tr>
</thead>
<tbody>
<tr :key="i" v-for="(product, i) in products">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
<td>{{ product.category }}</td>
<td>{{ product.delivery }}</td>
</tr>
</tbody>
</table>
</main>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
products: [
{ name: '게이밍마우스', price: 34500, category: '컴퓨터/주변기기', delivery: 4000 },
{ name: '무선게이밍마우스', price: 52000, category: '컴퓨터/주변기기', delivery: 3000 },
{ name: '게이밍키보드', price: 42000, category: '컴퓨터/주변기기', delivery: 3000 },
{ name: '무선게이밍키보드', price: 50000, category: '컴퓨터/주변기기', delivery: 4000 },
{ name: '무선충전기기', price: 24000, category: '컴퓨터/주변기기', delivery: 3000 },
{ name: '갤럭시탭', price: 385000, category: '모바일/휴대기기', delivery: 0 },
]
}
},
methods: {}
}
</script>
오히려 이전 발행글보다 난이도가 낮아진 기초의 느낌입니다.
[ Vue.js ] 반복문 사용하기 for .. in .. , 객체 리스트 출력하는 방법
안녕하세요 상훈입니다. Vue.js에서 반복문을 사용하고, 그 속에서 data binding이 된 객체 데이터를 출력하는 방법을 포스팅하겠습니다. 1. data 2. template 1. data import products from './assets/listData.j..
code-hoon.tistory.com
반응형
'FrontEnd > Vue.js' 카테고리의 다른 글
| [ Vue.js ] How to use Custom Directives in Vue.js 3?? | vue.js3에서 커스텀 디렉티브 사용하는 방법 예제 (0) | 2022.01.05 |
|---|---|
| [ Vue.js ] v-on, @ click 이벤트로 여러 개의 메서드 실행하기, 다중 메서드 실행 하는 방법 (0) | 2021.12.22 |
| [ Vue.js ] VS code - Snippet 활용하는 방법 (0) | 2021.12.20 |
| [ Vue.js ] 실무 팁 ▶ prefetch 짧게 이해하기, Lazy Load, vue-cli 3, router (0) | 2021.12.20 |
| [ Npm ] Npm 프로젝트 다른 포트(port)로 실행하는 방법 (0) | 2021.12.17 |
