内容 ：v-for 循环
<body>
<div id="two">
<ul>
<li v-for="(v,i) in arrs">
{{v.num}}
{{v.name}}
{{v.price}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#two',
data:{
// arr:[1,2,3], //数组
// obj:{name:'jack',age:12} //对象
arrs:[{
num:'1',
name:'apple',
price:'3'
}]
}
})
</script>
</body>
内容 ：表格
<body>
<div id="three">
<table border="1" cellspacing="0" width="300">
<thead>
<th>编号</th>
<th>名称</th>
<th>价格</th>
</thead>
<tr v-for="(v,i) in furit">
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
</tr>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#three'
, data: {
furit: [{
name: 'apple',
price: '3'
},
{
name: 'orage',
price: '5'
}
]
}
})
</script>
</body>
网友评论