在HTML中的基础v-for循环代码
<div id="app">
<table border="0" cellspacing="0"><!--cellspacing：边框为0-->
<thead>//
<tr>
<td>编号</td>//td是定义表头元素，有加粗效果
<td>名字</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr v-for="value in arr">
<td>{{value.num}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
</div>
v-for 指令可以绑定数组的数据
value in arr : value为变量名可自己命名，in为固定值，arr为变量（改变量应与script中data所后跟随的变量保持一致）
链接Vue.js
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
建立js文件，在js中绑定数组的数据
var app = new Vue({
el:"#app",
data:{
arrs:[1,2,3,4]
arr:[
{num:1,name:草莓,price:5},
{num:2,name:芒果,price:14},
{num:3,name:哈密瓜,price:11}
]
}
})
运行结果图.png
在for循环中输出数组下标
<ul>
<li v-for="(value,index) in arrs">{{index}}>={{arrs}}</li>
</ul>
用相同的js文件，输出结果为
0>=1
1>=2
2>=3
//>=是连接符号，可以随意用任意一个连接符号
在for循环中输出数组对象
<ul>
<li v-for="value in arr">{{value.num}},{{value.name}},{{value.price}}</li>
</ul>
用相同的js文件，输出结果为
1,草莓,5
2,芒果,14
3,哈密瓜,11
