v-for循环
2018-09-11 本文已影响0人
身痞味
链接js
<script src="js/vue.js"></script>
vue基本格式
<body>
<div id="a">
{{ma}}
{{num}}
{{obj}}
{{arr}}
</div>
<script>
new Vue({
el:'#a',// element
// 选择器
data:{
ma:'hellow vue!',
num:12,
obj:{name:'jast',age:'12'},
arr:[1,2,3]
}
})
</script>
</body>
v-for
<body>
<div id="a">
<ul>
<!--v-for=""-->
<!--<li v-for="val in arr">{{val}}</li>-->
<!--<li v-for="val in obj">{{val}}</li>-->
v-for="(值，下标) in arr"
<li v-for="(v,i) in arr">{{i}}---{{v}}</li>
<li v-for="(v,i) in obj">{{i}}---{{v}}</li>
<li v-for="(val,i) in arrs">{{val.name}}{{val.num}}</li>
</ul>
</div>
<script>
new Vue({
el: '#a',
data: ({
arr:[1,2],
obj:{name:'jast',age:'18'},
arrs: [
{
name: 'app',
num: 3
},
{
name: 'banana',
num: 2
}
]
})
})
</script>
</body>
表格
<style>
table{
width: 300px;
text-align: center;
}
</style>
<body>
<div id="a">
<table border=1 cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名臣</th>
<th>单价</th>
</tr>
</thead>
<tr v-for="(val,i) in arrs">
<td>{{i+1}}</td>
<td>{{val.name}}</td>
<td>{{val.num}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#a',
data: ({
arrs: [
{
name: 'apple',
num: 3
},
{
name: 'banana',
num: 2
}
]
})
})
</script>
</body>
