Những khóa học tuyệt vời tại V1Study:

Code

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-7">
  <p>Những khóa học tuyệt vời tại V1Study:</p>
  <ol>
    <!--
      Ở đây chúng ta cung cấp một object "todo" cho mỗi component
      "todo-item". Bằng cách này nội dung của từng component trở nên động.
      Mỗi component cũng sẽ nhận một thuộc tính "key". Chúng ta sẽ
      nói thêm về thuộc tính này sau.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'PHP-Laravel' },
      { id: 1, text: 'Java-Android' },
      { id: 2, text: 'AngularJS' },
      { id: 3, text: 'VueJS' },
      { id: 4, text: 'NoteJS' },
      { id: 4, text: 'ReactJS' }
    ]
  }
})
</script>
</body>
</html>