vue-for循環嵌套操作示例

來源：懂視網責編：小采時間：2020-11-27 22:01:21

vue-for循環嵌套操作示例

vue-for循環嵌套操作示例:本文實例講述了vue-for循環嵌套操作。分享給大家供大家參考，具體如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <st

推薦度：

點擊下載本文 文檔為doc格式

導讀vue-for循環嵌套操作示例:本文實例講述了vue-for循環嵌套操作。分享給大家供大家參考，具體如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <st

本文實例講述了vue-for循環嵌套操作。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 </style>
</head>
<body>
<table id="app" border="1" cellspacing="0" cellpadding="0">
<tr>
 <td>父循環第幾次</td>
 <td>子循環第幾次</td>
 <td>json的第幾條數據</td>
 <td>數值</td></tr>
<tbody v-for="x,index in parentList">
<tr v-for="i,index2 in x.childList">
 <td>{{index}}</td>
 <td>{{index2}}</td>
 <td>{{i.index}}</td>
 <td>{{i.childName}}</td>
</tr>
</tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
 const app=new Vue({
 el:"#app",
 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>

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結果：