<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<h1>(8)v-for迭代JSON数组</h1>
<!-- View -->
<div id="app">
<table>
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr v-for="(person, index) in list">
<td>{{index+1}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>
</div>
<script>
// Model
var data = {list:[{name:'张三', age:30}, {name:'李四', age:40}]};
// ViewModel
var vue = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
Vue(7)v-for迭代JSON对象
于 2021-06-17 10:12:21 首次发布