2018-09-11
2018-09-11 本文已影响18人
其实_dnhl
Vue中的for循环
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<style>
table{
width: 300px;
color: #ff7c35;
}
</style>
<body>
<div id="nbsp">
<table border="1" cellspacing="0">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
<tr v-for="(value,index) in fruit">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
</table>
</div>
链接Vue.js
<script src="js/vue.js"></script>
输入的Vue.js代码如下：
<script>
new Vue({
el:"#nbsp",
data:{
fruit:[
{name:"apple",price:3},
{name:"banana",price:3},
{name:"mailefaolen",price:1000}
]
}
});
</script>
</body>
在for循环输入中还可以这样写：
<tr v-for="value in fruit">
<td>{value.num}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
那么在js中输入就成了这样：
<script>
new Vue({
el:"#nbsp",
data:{
fruit:[
{num:1,name:"apple",price:3},
{num:2,name:"banana",price:3},
{num:3,name:"mailefaolen",price:1000}
]
}
});
</script>
最后输出的结果为：
QQ图片20180911194136.png
