为什么我的数据遍历的时候运行结果是这样的，求解遍历表格？
为什么我的数据遍历的时候运行结果是这样的，代码与经运行结果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style>
.app-tc-vue {
height: 400px;
width: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="app-school-vue" id="app">
<table border="1" cellspacing="0">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>电话号码</th>
<th>身份证号</th>
<th>学校</th>
<th>年级</th>
<th>学院/系</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
<tr>
<td>01</td>
<td>邢晗铭</td>
<td>22</td>
<td>15187129584</td>
<td>53262220006101578</td>
<td>浙江音乐学院</td>
<td>三年级</td>
<td>声乐学院</td>
<td>浙江台州</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr v-for="(list,i)in lists" ;key="list.id">
<td>{{i}}</td>
<td>{{lists.name}}</td>
<td>{{lists.age}}</td>
<td>{{lists.phone}}</td>
<td>{{lists.ID}}</td>
<td>{{lists.school}}</td>
<td>{{lists.grade}}</td>
<td>{{lists.sch}}</td>
<td>{{lists.addr}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
</body>
</html>
window.onload = function() {
new Vue({
app: '#app',
data: {
lists: {
[id: 02, name: '李凡一', age: 20, phone: 13618764180, ID: 5326222200006101578, school: '浙江音乐学院', grade: '二年级', sch: '声乐学院', addr: '浙江台州']
},
},
运行结果：
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7605666
- 你也可以参考下这篇文章：根据复选框的值进行表格数据的筛选
- 除此之外, 这篇博客: 无缝滚动轮播图中的 在页面布局中通常会用到轮播图，特别是在一些大型的网页中都可以看到轮播图，有时候为了方便快速我们可能会用到一些插件直接使用轮播图，还有就是自己把轮播图写出来，轮播图的样式有很多，接下来我们将了解常用的一种轮播图的写法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
滑动轮播图效果
- 您还可以看一下 刘建萍老师的人工智能系列课程零基础讲解知识点和实例应用线性回归梯度下降逻辑回归课程中的 讲解机器学中会涉及到的有关数学方面的知识储备有哪些小节, 巩固相关知识点
list应该是个数组才对，你vue里面lists是个object，所以循环不出来，改成这样试试：
window.onload = function() {
new Vue({
app: '#app',
data: {
lists:[
{id: 02, name: '李凡一', age: 20, phone: 13618764180, ID: 5326222200006101578, school: '浙江音乐学院', grade: '二年级', sch: '声乐学院', addr: '浙江台州'}
],
},