Những khóa học tuyệt vời tại V1Study:
<!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>