vue-example-list-rendering

by ChangJoo Park

HTML

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<div id="app">
  <div>
    <h1>div 사용</h1>
    <div v-for="todo in todos">
      {{todo}}
    </div>
    <hr>
    <h1>ul, li 사용</h1>
    <ul>
      <li v-for="todo in todos">
        {{todo}}
      </li>      
    </ul>
    <hr>
    <h1>Template 사용</h1>
    <template v-for="todo in todos">
      {{todo}}
    </template>
  </div>
</div>

JavaScript

new Vue ({
	el: '#app',
  data: function () {
  	return {
			todos: [
      	'Vue.js 공부하기',
        '친구와 만나기',
        '책상 정리하기'
      ]
    }
  }
})