<html>
<head>
<title>Hello</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
window.onload = function(){
var app = new Vue({
el: '#app',
data:{
msg: 'hello',
list: [
{id:111, name:'Taro'},
{id:222, name:'Ken'},
{id:333, name:'Hanako'}
]
}
});
}
</script>
</head>
<body>
<h1>サンプル</h1>
<div id="app">
<h2>メッセージ</h2>
{{msg}}
<h2>サンプルテーブル</h2>
<table>
<thead>
<tr><th>No</th><th>ID</th><th>名前</th></tr>
</thead>
<tbody>
<tr v-for="(v, index) in list" v-bind:key="index">
<td>{{index+1}}</td>
<td>{{v.id}}</td>
<td>{{v.name}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
