Vue.js 반복문 v-for

개요

Vue.js 반복문 v-for

예시 1

<div id="app">
  <span v-for="n in 10">{{ n }} </span>
</div>

<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<script>
  Vue.createApp({
  }).mount('#app')
</script>

예시 2

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    }
  }).mount('#app')
</script>

같이 보기

참고

https://vuejs.org/v2/guide/