신기하게, vue의 html 내에서는 반복문을 사용할 수 있다.
예를 하나 들어 문법을 보자면 이러하다.
<a v-for="menu in 3" :key="menu">Home</a>-> 뒤에 :key를 반복문을 사용할때 꼭 적어주어야 한다.
컴퓨터가 반복문 돌린 요소들을 각각 구분하게 하기 위함이란다.
menu로 해놓은 부분은 사실 어떤 이름으로 하던 상관없지만,다 동일한 이름이어야 한다.
이렇게 하면 Home이라는 a태그가 3개 생기게 된다!
그런데 사실 웹페이지를 만들때 화면에서 똑같은 요소를 여러개 만들 일은 잘 없다.(내기준)
그렇기에 여기서 응용이 좀 필요한데, in 뒤에 숫자대신 array를 넣어주면 array 내의 데이터의 갯수만큼 반복이 된다.
예시
<a v-for="menu in menus" :key="menu"> {{menu}} </a>-> menus : ['Home, Shop', 'About']이라고 해놨다고 가정,
반복문을 돌리게 되면
<a>Home</a>
<a>Shop</a>
<a>About</a>이렇게 세개의 a태그가 생성 될 것이다.!!
배웠다고 꼭 이걸 써야한다는 강박을 가지지는 말자..쓰고싶을때 쓰기 ㅎ
짱이되어야지