vue 01 for循环
2018-09-10 本文已影响0人
喔爹
第一章01
<style type="text/css">
table{
width: 500px;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id='itany'>
{{msg}}
{{arr}}
{{obj}}
{{arrs}}
<ul>
<!--<li v-for="value in arr">{{value}}</li>
<li v-for="val in obj">{{val}}</li>-->
<li v-for="(val,index) in arr">{{index}}=>{{index}}</li>
<li v-for="arrs in arrs">{{arrs.num}} {{arrs.name}} {{arrs.age}}</li>
<p>
此菜由于食材只能提供一份请慎重选择
</p>
</ul>
<table border="1" cellspacing="0" >
<thead>
<tr>
<td>编号</td>
<td>名字</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr v-for="arrs in arrs">
<td>{{arrs.num}}</td>
<td>{{arrs.name}}</td>
<td>{{arrs.age}}</td>
</tr>
</tbody>
</table>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({ //element元素
el:'#itany',
data:{//写数据
msg:'hello vue',
arr:[1,2,3,4,5],
obj:{name:'mmp',age:38},
arrs:[
{num:1,name:'油炸',age:64},
{num:2,name:'清蒸',age:128},
{num:3,name:'红焖',age:256}
]
}
})
</script>
</body>
