3. Vue js - v-for 반복문 - 리스트 렌더링

ㅁ v-for는 반복적인 HTML 요소에 사용함

ㅇ 기존 HTML 태그 - 하드코딩 적용

  <div>

    <a href="#">짜장면</a>

    <a href="#">짬뽕</a>

    <a href="#">우동</a>

    <a href="#">울면</a>

    <a href="#">기스면</a>

  </div>

 ㅇ 현재 HTML 태그 - v-for 반복문 적용

<template>

  <div>

     <a href="#" v-for="반복문이름 in 메뉴들" :key="반복문이름">{{반복문이름}}</a> 

<!--

ㅇ v-for 반복문 설명

v-for = "반복문이름 in 메뉴들" :key"반복문이름" {{반복문이름}}

1. 아래 data()에 있는 메뉴들 : ['짜장면', '짱뽕', '우동', '울면', '기스면'], 안에 있는 값들을 in 메뉴들 변수에 담고 {{반복문이름}}으로 HTML에 표기해줌 

2. key가 없으면 오류 발생, 반드시 :key="" 있어야됨, key의 용도는? 반복문 구분하기 위한 속성, 유니크하게 변하는 값, 그냥 반복문 고유Key임

-->       

  </div>

</template>

<script>

export default {

  name: 'App',  

  data() {

    return {

      메뉴들 : ['짜장면', '짱뽕', '우동', '울면', '기스면'],  // v-for(반복문) 배열 데이터 저장

    }

  },

  components: {    

  }

}

</script>

---

ㅁ 반복문 이름 2개 사용

<div>

   <a href="#" v-for="(반복문이름, 반복문고유key) in 메뉴들" :key="반복문고유key">{{반복문이름}}</a>       

</div>

현재 이 반복문 이름을의 고유키를 붙여서 사용함

*중요 : 반복문고유key는 숫자만큼 반복함 0,1,2,3,4,5,6,7,8 ++

---

ㅁ v-for 적용 메뉴 예시

ㅇ 기존 HTML 하드코딩 메뉴

<template>

<h1>기존 HTML 하드코딩</h1>

  <div>

    <h1>수박</h1>

    <p>1만원</p>

  </div>

  <div>

    <h1>딸기</h1>

    <p>2만원</p>

  </div>

  <div>

    <h1>멜론</h1>

    <p>2만원</p>

  </div>

</template>

ㅇ 현재 v-for(반복문)이용 HTML코딩

<template>

<h1>현재 v-for 반복문 이용 코딩</h1>  

  <div v-for="과일리스트 in 과일들" :key="과일리스트">

    <h1>{{과일리스트}}</h1>    

  </div>

<script>

</template>

<script>

export default {

  name: 'App',  

  data() {

    return {

      과일들 : ['수박', '딸기', '멜론'],  // v-for(반복문) 배열 데이터 저장

    }

  },

  components: {    

  }

}

</script>

ㅇ 현재 추가 v-for(반복문)에 key 적용

<template>

<h1>현재 v-for 반복문 index값 코딩, i는 0,1,2,3,4..... 값을 가지고 있음</h1>    

    <div v-for="(과일리스트, i) in 과일들" :key="i"> 

      <h1>{{과일리스트}}</h1>

    </div>

<!-- 과일들 안에 있는 배열(array) 값들을 과일리스트 안에 담고 {{과일리스트}} 표기 -->

</template>

<script>

export default {

  name: 'App',  

  data() {

    return {

      과일들 : ['수박', '딸기', '멜론'],  // v-for(반복문) 배열 데이터 저장

    }

  },

  components: {    

  }

}

</script>