💡 v-for HTML 반복문1

vue의 html반복문을 사용할 경우에는 v-for 을 사용한다.

<태그 v-for="작명 in 몇회" : key="작명"> home </태그>

1. 원하는 태그에 v-for="작명 in 반복할횟수" 를 적는다.

2. 그리고 센스있게 :key="작명" 이것도 추가해준다.

   그럼 이 HTML 태그는 내가 원하는 만큼 반복생성된다.
   작명은 변수하나 작명하는 것으로, 원하는 대로 작성하면 된다.

📝 :key 속성은 반복문돌릴 때 꼭 필요하다! 이유는 반복한 요소들을 각각 구분짓기 위해서.

💡 v-for HTML 반복문2

v-for 반복문을 사용할 때 array, object 데이터를 집어넣을 수도 있다.

예를 들어서 array 자료를 하나 만들어보자. 데이터로 저장(스크립트 태그 내에 데이터를 저장한다.) !

data(){
return {
  메뉴들 : ['Home', 'Shop', 'About']
}
}

-> 여기서 '메뉴들'은 '데이터명'을 뜻한다.
그럼 이제 메뉴들 이라는 데이터로 반복문을 돌릴 수 있다.

그리고 템플릿태그에서

<a v-for = "작명 in **메뉴들**" :key = "작명"> {{작명}} </a>

이와 같이 작성한다. 반복시킬 횟수 적는 란에다가 array 자료를 집어넣는 것이다. 위에서 메뉴들이라고 변수를 지정했으니 메뉴들이라고 작성하면 되는 것!

이 경우

1. 메뉴들안의 자료 갯수만큼 반복된다.
2. 작명한 변수는 반복될 때마다 메뉴들 안에 있던 자료들이 된다.
   예를 들어서 작명한 변수는 출력해보면 1회 반복시엔 'Home' 2회 반복시엔 'Shop' 이렇게 변한다는 의미이다.
   

작명은 내가 원하는 이름으로 지정하면 되고 메뉴들에는 데이터의 메뉴들 속 배열의 갯수만큼 반복이 되는 것을 의미한다.

💡 key 값을 왜 사용해야하는가?

1. 반복문을 쓸 때 꼭 써야함
2. 반복문 돌린 요소를 컴퓨터가 구분하기 위해 사용한다.
3. index사용은 지양하는게 좋다.(유니크하게 사용하는 게 좋다)

💡 vue 반복문은 변수 작명 2개까지 가능하다.

<div v-for="(a, i) in products" :key ="i">
  <h4> {{products[i]}}</h4>
  <p> {{ price1 }} 만원</p>
 </div>

a는 데이터를 의미하고, i는 index로 0,1,2를 뜻한다.
그래서 products 라는 데이터의 0번째 ~ 2번째의 값들이 출력된다.

---

    <NewPost :post="post[i]" v-for="(a, i) in post" :key="i" />
<!--<NewPost :post="a" v-for="(a, i) in post" :key="i" /> 라고도 작성할 수 있다.-->

  <!--  아래는 하드코딩 , 위는 반복문 이용
    <NewPost :post="post[0]" />
    <NewPost :post="post[1]" />
    <NewPost :post="post[2]" /> -->

위와 같은 반복문의 예시도 있다. post라는 데이터의 배열만큼 반복하겠다는 것이고 그래서 변수를 2개 지정해두었고, 하나는 key값.