Vue中v-for循環節點的實作程式碼
- 不言原創
- 2018-08-14 11:55:131919瀏覽
這篇文章帶給大家的內容是關於Vue中v-for循環節點的實作程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="rrn">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>父循环第一次</th>
<th>子循环第一次</th>
<th>json数据的第几条</th>
<th>数值</th>
</tr>
<tbody v-for="dp,index in parentList" >
<tr v-for="bp,indo in dp.childList">
<td>{{index}}</td>
<td>{{indo}}</td>
<td>{{bp.index}}</td>
<td>{{bp.childName}}</td>
</tr>
</tbody>
</table>
</p>
</body>
<script src="vue.js"></script>
<script>
let er=new Vue({
el:"#rrn",
data:{
parentList: [
{
childList: [{
index: 1,
childName: "第一个节点"
}, {
index: 2,
childName: "第一个节点"
}, {
index: 3,
childName: "第一个节点"
}, {
index: 4,
childName: "第一个节点"
}, {
index: 5,
childName: "第一个节点"
}]
},
{
childList: [{
index: 6,
childName: "第二个节点"
}, {
index: 7,
childName: "第二个节点"
}, {
index: 8,
childName: "第二个节点"
}, {
index: 9,
childName: "第二个节点"
}, {
index: 10,
childName: "第二个节点"
}]
},
{
childList: [{
index: 11,
childName: "第三个节点"
}, {
index: 12,
childName: "第三个节点"
}, {
index: 13,
childName: "第三个节点"
}, {
index: 14,
childName: "第三个节点"
}, {
index: 15,
childName: "第三个节点"
}]
}]
}
})
</script>
</html>
相關推薦：
vue中v-if和v-show有何區別？ v-if與v-show之間的區別總結
#以上是Vue中v-for循環節點的實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn