Vue.js v-for 반복문

v-for 반복문 사용법

1. foreach와 똑같은 형태를 뛴다.

2. todo에 todos의 값을 한번씩 대입해 준다.

3. p태그가 3번 이루어져 출력이 되게 된다.

4. 서버단에서 처리한 데이터를 DOM에 넣어주고 사용하면 반복문이 쉽게 이루어진다.

html을 이렇게 적어 주자 

v-for문은 foreach와 같은 형태를 가지므로 foreach를 꼭 숙지 하면 좋을 듯 하다. 

위에를 보면 todos의 값이 3가지 가지고 있다.

todo에 이 값을 한번에 하나 씩 대입을 해준다. 

todo = javaScript

todo = vue

todo = 무언가 

이런 식으로 한번에 한나씩 대입을 하면서 넣어주면 p태그에 값을 3번을 넣어주어 출력을 하게 된다.

v-for는 태그 라이브러리나 jsp에서 사용하는 반복문과 똑같이 사용하면 좋다.

하지만 vue에서 사용하면 더 좋은 점은 ajax통신을 마음 먹은대로 사용이 가능 하므로 

더 v-for 반복문을 익혀 두면 좋다.

 

결과 화면은 이렇다 .