第一节
<script src="vue.j/vue.js">
</script>
<body>
<div id='add'>
{{meg}}
{{num}}
{{org}}
</div>
<script>
new Vue({// vue实列
el:'#add', //选择器
data:{//对象
meg:'hello vue',
num:6,
org:[1,2,3]
}
})
</script>
</body>
<li v-for=(val，inp ） in arr//导入的值>{{val}}---{{inp}}</li>
第二节 vue-for循环
<script type="text/javascript" src="vue.j/vue.js">
</script>
<body>
<div id="emty">
<ul>
<li v-for="(value,inp) in arr">{{inp}}---{{value}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#emty',
data:{
arr:[1,2,3],
}
})
</script>
</body>
第三节
<script type="text/javascript" src="vue.j/vue.js">
</script>
<body>
<div id="app">
<table border="1" cellspacing="0" text-align="center">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="(value//输出内容,index//下标) in furit">
<td>{{index+1}}</td>下标为0 从1开始
<td>{{value.name}}</td>
<td>{{value.parect}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
furit:[
{
name:'orange',
parect:3
},
{
name:'apple',
parect:2
}
]
}
})
</script>
</body>
网友评论