v-for 循环
<div id="in">
<ul>
<li v-for="v in arr">{{v}}</li>
<li v-for="v in obj">{{v}}</li>
<!--<li v-for="(val,ind) in arr">
{{ind}}--{{val}}
</li>
<li v-for="(val,ind) in obj">
{{ind}}>={{val}}
</li>-->
<li v-for="v in value">
{{v.num}}
{{v.name}}
{{v.price}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#in',
data:{
arr:[1,2,3],
obj:{name:'yang', age:12},
value:[
{
num:"1",
name:"apple",
price:"3"
},
{
num:"1",
name:"apple",
price:"3"
}
]
}
})
</script>
v-for表格
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
table{
width: 500px;
margin:50px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="ta">
<table border="" cellspacing="0" cellpadding="">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
<tr v-for='(v,index) in value'>
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:'#ta',
data:{
arr:[1,2,3],
obj:{name:'yang', age:12},
value:[
{
name:"apple",
price:"3"
},
{
name:"apple",
price:"3"
}
]
}
})
</script>
