【案例】在html文件中，通过vue循环数据，填充到表格里
<!DOCTYPE html>
<html>
<head>
<title>Vue 循环数据示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
users: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 },
{ id: 3, name: '王五', age: 28 }
]
}
});
</script>
</body>
</html>这个HTML文件中使用了Vue.js来循环users数组中的每个用户对象，并将它们填充到了一个表格中。Vue.js通过v-for指令来实现循环，并通过插值表达式{{ }}来显示每个属性的值。这是一个简单的数据循环和展示的例子。
评论已关闭