모양

어떤태그든 반복하고싶은 html tag

<div v-for="작명 in 3" :key="작명">반복내용</div>

반복횟수를 in 다음숫자에 기입한다. 그 숫자만큼 횟수가 반복되고

export default {
  name: 'App',
  data(){
  return {
    테스트1  : '테스트',
    테스트2  : "테스트",
		메뉴들 : ['Home', 'Shop', 'About']
		
  }
  },
  components: {
  }
}

'String' == "String" 동일하다 테스트 출력결과 동일

<p v-for = "아무노래 in 3" :key= "아무노래"> 반복내용 </p>
  <p v-for ="아무노래 in 3" :key="아무노래"> 반복내용 </p>

출력값동일

<div v-for="작명 in 3"(한칸 뛰우기):key="작명">{{작명}}</div>

명시된것 외에 경우는 에러가 안뜨고 출력값이 동일하였다.

실수할만한 점을 발견했다.

<br>
  <p>{{테스트1}}</p>                    결과값 테스트1 출력
  <br>
  <p v-for ="작명 in 3" :key="작명"> {{테스트1}} </p> 결과값 테스트1 3번출력
  <br>
  <p v-for ="테스트1 in 3" :key="테스트1"> {{테스트1}} </p> 결과값 1,2,3 순서대로 출력

연습하다가 의외의 결과를 얻었다. v-for 문법에서 사용되는 작명은 기존 데이터 정의 칸에 없어야한다.

나는 테스트 당시 테스트1이라는 오브젝트네임이 있었다. 오브젝트 네임을 받게된다면 그것은 1 2 3 을 받는 작동을한다.

근데 마침 우연하게 다음내용이 위 작동과의 밀접한 관계를 가지고 있다.

그 관계는 배열 오브젝트를 vfor 문에서 받을때 발생한다.

배열의 오브젝트를 v-for 문이 받을때의 모양