[Vue3 Opt] 부동산 홈페이지 생성 2 - HTML 반복

 

 

(코딩애플님 vue 3강)

 

Vue를 이용하면 반복적인 HTML 문을 깔끔하게 사용할 수 있다고 합니다.

 

네비게이션바 짤 건데. 이런 식으로 반복적인 HTML문이 생길 수 있지요 ?

반복하기 싫으니까 ! 어떻게 하면 좋을까 ?

 

● v-for

<태그 v-for="이름 in 횟수" :key="이름">

뒤에 :key를 꼭! 써줘야 에러가 나지 않는다.
:key 는 반복문으로 생성한 것을 각각 구분하기 위한 속성

 

그리고 횟수는 꼭 숫자일 필요는 없다.

데이터 바인딩을 이용할 수 있는데

다만 데이터바인딩을 하면 그 안의 내용이 나오는 것이 아닌 자료 안의 데이터 갯수만큼 반복된다.

출력 내을 바꾸려면 태그 사이 부분(Home)을 건드려야 한다. 

<a v-for="작명 in menus" :key="작명">Home</a>

 

 

 : menus 의 데이터 갯수가 네 개 이므로 in menus를 하면 네 번 반복

 

---

 

※ 헷갈리지 않도록 주의!

<a v-for="작명 in menus" :key="작명">{{products}}</a>

 

→ 이런 식으로 태그 사이 화면에 출력되는 값을 쓰는 부분에 data보관소에서 정의한 배열 이름을 사용할 경우 

 

 

→  {{menus}} 도 마찬가지로 이렇게 모든 값이 전부 출력 된다....

 

 

→  반복적으로 하나씩 값을 출력하기 위해서

'작명' 부분 ':key=작명'  이렇게 썼을 경우,  {{작명}} 이라고 써야 원하는 값이 출력된다.

 

<a v-for="작명 in menus" :key="작명">{{작명}}</a>

 

 

그리고 또 한 가지

"작명" 부분은 값을 두 개까지 쓸 수 있다.

 

왼쪽 변수는 array 내의 데이터

오른쪽 변수는 1씩 증가하는 index

<a v-for="(작명,i) in menus" :key="작명">{{i}}</a>

 

i 를 줄 경우 0부터 시작해서 1씩 증가하는 숫자로 출력된다.

 

아래와 같은 의미

 

for (let i = 0; i < onerooms.length; i++) {
  let 작명 = onerooms[i];
  ...
}

 

그래서 index는 화면에 순번을 표시하거나 특정 위치에 접근할 때만 쓰면 된다.

---

 

<template>
    <div class="menu" >
        <a v-for="작명 in menus" :key="작명">Home</a>
        <a>Products</a>
        <a>About</a>
    </div>
    <div>
        <h3>{{ products[0] }}</h3>
        <p>{{ price1 }}만원</p>
    </div>
    <div>
        <h3 class="red" :style="스타일">{{ products[1] }}</h3>
        <p>{{ price2 }}만원</p>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>

export default {
    name: 'App',
    data() {
        return {
            price1: 60,
            price2: 70,
            스타일: 'color : blue',
            products: ['역삼동', '천호동', '봉천동'],
            menus : ['Home', 'Shop','About', 'QnA']
        }
    },
    components: {}
}
</script>

 

상품 목록을 반복문으로 출력하기 과제

 

<h3 v-for="dong in products" :key="dong">{{dong}}</h3>

 

이렇게 나와버렸다 흑.

 

<div v-for="dong in products" :key="dong">
    <h3 >{{dong}}</h3>
    <p>{{ price1 }}만원</p>
</div>

 

근데 그냥 이렇게 div 에 v-for 주면 되는 것이었다..

 

또는

<div v-for="(dong,i) in products" :key="i">
	<h3>{{products[i]}}</h3>

 

결과는 같다.

 

끝!