[Vue] #2 - v-for문 사용하기

1. v-for 반복문
  
모든 HTML태그에 적용가능하다

<태그 v-for="변수명 in 반복횟수 " :key="변수명">

 ex )

 <a v-for="x in 3 " :key="x">

 

:key의 용도
-반복문쓸 때 꼭 써야한다
-반복문 돌린 요소를 구분하기 위해 씀

 1-1. v-for를 활용해 템플릿에 변수출력
menus : [' ', ' ', ' ']

1번
<a v-for="menu in menus" :key="menu">{{ menu }}</a>

2번
<a v-for="(menu,i) in menus" :key="i">{{ menus[i] }}</a>

1-2. 2개의 변수 가능

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

menu는 배열의 데이터가 되고, i는 인덱스가 된다 -> 2개쓰려면 뒤에 꺼를 key에 넣어줘야함

 예제

<!-- 1번 -->
    <div v-for="product in products" :key="product">
        <h4 class="red" :style="스타일">{{ product }}</h4>
        <!-- 애초에 바뀔 일이 없으면 데이터 바인딩 필요 X -->
        <p>{{ price1 }}만원</p>
        <!-- 데이터 바인딩 -->
        <button v-on:click="신고수[0]++">허위매물신고</button> <span>신고 수 : {{신고수}}</span>
                      <!-- 신고수+= 1 -->
    </div>
    <!-- 2번 -->
      <div v-for="(product,i) in products" :key="i">
        <h4 class="red" :style="스타일">{{ products[i] }}</h4>
        <!-- 애초에 바뀔 일이 없으면 데이터 바인딩 필요 X -->
        <p>{{ price1 }}만원</p>
        <!-- 데이터 바인딩 -->
        <button @click="javascript">허위매물신고</button> <span>신고 수 : {{신고수}}</span>
        <button @mouseover="increase">허위매물신고</button> <span>신고 수 : {{신고수}}</span>
    </div>