<!doctype html>
<html lang="en">
<head id="head">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<title>{{title}} </title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<!--vue操作对象-->
<table border="1">
<tr>
<th>序号</th>
<th>属性</th>
<th>值</th>
</tr>
<tbody>
<tr v-for="(v,k,i) in list">
<td>{{i}}</td>
<td>{{k}}</td>
<td>{{v}}</td>
</tr>
</tbody>
</table>
<hr>
<!--vue操作数值-->
<table border="1" width="100%">
<tr v-for="v in 20">
<td>{{v}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#head',
data:{
title:'Vue v-for操作对象与数值'
}
});
var app = vue({
//element
el:'#ask',
data:{
list:{
title:'简单记录',
url:'#',
domain:'#'
}
}
});
</script>
</body>
</html>
