<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div style="display:flex; justify-content:center;">
<div>
<table border="1">
<tr>
<td>id</td>
<td>Name</td>
<td>age</td>
</tr>
<tr v-for="item in data" :key="item.id">
<td>{{ item.id}}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
</div>
</div>
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const data = ref([
{
id: 1,
name: '张三',
age: 20,
},
{
id: 2,
name: '李四',
age: 21,
},
{
id: 3,
name: '王武',
age: 22,
},
]);
return {
data
}
}
}).mount('#app')
</script>
</body>
</html>