第一節(jié)
<script src="vue.j/vue.js">
</script>
<body>
<div id='add'>
{{meg}}
{{num}}
{{org}}
</div>
<script>
new Vue({// vue實(shí)列
el:'#add', //選擇器
data:{//對(duì)象
meg:'hello vue',
num:6,
org:[1,2,3]
}
})
</script>
</body>
<li v-for=(val僚焦，inp ） in arr//導(dǎo)入的值>{{val}}---{{inp}}</li>
第二節(jié) vue-for循環(huán)
<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>
第三節(jié)
<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>編號(hào)</th>
<th>名稱</th>
<th>價(jià)格</th>
</tr>
</thead>
<tbody>
<tr v-for="(value//輸出內(nèi)容,index//下標(biāo)) in furit">
<td>{{index+1}}</td>下標(biāo)為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>