1.v-for 循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="qq">
{{message}}
</div>
<script>
var mtapp = new Vue({
el:'#qq',
data:{
message:'hello vue.js world!'
}
})
</script>
</body>
</html>
2数组对象
<script src="vue.js/vue.js"></script>
<div id="aa">
<ul>
<li v-for="a in arrs">
{{a.name}}
{{a.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#aa',
data:{
arrs:[
{
name:'jack',
age:18
},
{
name:'rose',
age:18
}
]
}
})
3.表格
<script src="vue.js/vue.js"></script>
<div id="arr">
<table border=1 cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in fruit">
<td>{{i+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#arr',
data:{
fruit:[
{
name:'apple',
price:'3'
},
{
name:'banana',
price:"2"
},
{
name:"pig",
price:"200"
}
]
}
})
</script>
网友评论