[vue3] v-for 를 정복해버렸다...!!!!!

뷰 새내기 윤쮼입니다!!!!

 

뷰의 기초 중의 기초

v-for

시간도 없는데

오늘 정복해버릴까합니다.

 

그래서 예시를 들고왔어요!!!

 

첫번째 예시!!

 

데이터이름 : 과일들

데이터 내용 : 사과, 딸기, 바나나

 

과일들 : [사과, 딸기, 바나나] 

 

이거를 v-for 로 뿌려줄 거에요!

 

<template>
 <ul v-for="과일 in 과일들" :key="과일">
  <li>{{과일}}</li>
 </ul>
</template>

 

자 위에 코드에서 "과일들"(즉 데이터이름) 에서 각각의 "과일"(데이터내용 -  네이밍은 마음대로 가능)을

빼내온다고 생각하면 되요.

 

:key="과일"은 안쓰면 오류나니까 써야합니다.

(공식페이지에서 하래요....)

 

"과일 in 과일들" 에서의 과일과

:key="과일" 에서 과일은

같은 값을 가리킵니다.

 

출력하면 사과, 딸기, 바나나 

이렇게 같죠. 

 

 

---

 

두번째 예시!!

 

데이터이름 : 음식들

데이터 내용 : 짜파게티, 유부초밥, 김치

 

음식들 : [짜파게티, 유부초밥, 김치]

 

<template>
 <ul v-for="(음식,i) in 음식들" :key="i">
  <li>{{음식}}</li>
 </ul>
</template>

 

이번에는 모양이 좀 다르죠? 

데이터 내용의 이름과 key 의 이름을 다르게 설정해 줘도 되는데요

이런 경우에는 key 가 가리키는 값이 데이터 내용이 아니라

데이터의 순서가 됩니다.

 

 

"(음식, i ) in 음식들" 에서의 음식과

:key="i" 에서 i은

각각 다른 것을 가리킵니다.

 

음식은 데이터의 내용

i 는 데이터의 순서

 

즉,

 

음식 : 짜파게티, 유부초밥, 김치

i : 0, 1, 2

 

이렇게 가리킵니다.

 

 

이러한 특징을 알게 되면

복잡한 기능을 반복문으로 구현할 때 유용하답니다.

 

 

데이터이름 : num

데이터 내용 : 0,0,0

 

num: [0, 0, 0]

 

<template>
 <div v-for="(item,i) in num" :key="i">
   <button @click="increase(i)">버튼 {{i}}</button>
   <p>{{item}}</p>
 </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      num :[0,0,0]
    }
  },
  methods :{
    increase(i){
      this.num[i] ++
    }
  }
}
</script>

 

실행하면 아래와 같이 구현이 됩니다.

i 가 삽입된 곳은 데이터의 순서인 0,1,2 숫자가 반복이 되어야하는 곳이고

나머지는 일반적인 v-for 반복문과 똑같습니다.

 

버튼 구현 gif