Vue中v-for循环节点的实现代码

来源：动视网责编：小采时间：2020-11-27 19:32:25

Vue中v-for循环节点的实现代码

Vue中v-for循环节点的实现代码:本篇文章给大家带来的内容是关于Vue中v-for循环节点的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html lang="en"> <head> <meta charset=&

推荐度：

点击下载本文 文档为doc格式

导读Vue中v-for循环节点的实现代码:本篇文章给大家带来的内容是关于Vue中v-for循环节点的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html lang="en"> <head> <meta charset=&

本篇文章给大家带来的内容是关于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-for循环节点的实现代码

推荐度：

点击下载本文 文档为doc格式

标签： VUE 代码循环

热门焦点

Vue中v-for循环节点的实现代码

Vue中v-for循环节点的实现代码

Vue中v-for循环节点的实现代码

最新推荐

猜你喜欢

热门推荐