Rumah > Artikel > hujung hadapan web > Vue中v-for循环节点的实现代码
Vue中v-for循环节点的实现代码
- 不言asal
- 2018-08-14 11:55:131881semak imbas
本篇文章给大家带来的内容是关于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之间的区别总结
Atas ialah kandungan terperinci Vue中v-for循环节点的实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js中深拷贝与浅拷贝的详细介绍（代码分析）Artikel seterusnya：js中数组操作有哪些？js中操作数组的方法总结