Vue의 v-for 루프 노드 구현 코드
- 不言원래의
- 2018-08-14 11:55:131880검색
이 글의 내용은 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으로 문의하세요.