Vue遍历二维数组

一.遍历效果：

利用vue二维数组，最终实现遍历出一个长宽都是15位的矩阵

二.构建遍历对象：

checkerboard对象在data中已经声明了，只是后来在mounted()方法中用代码重构了一次。

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                checkerboard:[
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                    // {rows:[{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0},{cell:0}]},
                ],
            }
        },
        mounted(){
            // console.log(JSON.stringify(this.checkerboard));
            for(var i = 0;i < 15;i++){
                var rows = [];
                // var cell = [];
                for(var j = 0;j < 15;j++){
                    // var obj = {j:0};
                    var obj = {cell:0};
                    rows.push(obj);
                }
                var Row = {rows:rows};
                this.checkerboard.push(Row);
            }

            console.log(JSON.stringify(this.checkerboard));
        
        },
        methods:{

        },

    });
</script>

三.html前端代码：
1.我们在第一层的的遍历效果：

<div id="app">
    <table>
        <tr v-for="item in checkerboard" >
            <td>{{item}}</td>
            <!-- <td>{{item.rows}}</td> -->
            <!-- <template v-for="items in item">
                <template v-for="itemss in items">
                    <td>{{itemss.cell}}</td>
                </template>
            </template> -->
        </tr>
    </table>
</div>

2.在第二层中遍历的效果：（此时我们指点访问cell是访问不到的，items.cell结果为空）

<div id="app">
    <table>
        <tr v-for="item in checkerboard" >
            <!-- <td>{{item}}</td> -->
            <!-- <td>{{item.rows}}</td> -->
            <template v-for="items in item">
                <td>{{items}}</td>
                <!-- <template v-for="itemss in items">
                    <td>{{itemss.cell}}</td>
                </template> -->
            </template>
        </tr>
    </table>
</div>

3.第三层的结果：（此时已经能够访问到cell了，我们只需把遍历对象从itemss换成itemss.cell就是最终结果）

<div id="app">
    <table>
        <tr v-for="item in checkerboard" >
            <!-- <td>{{item}}</td> -->
            <!-- <td>{{item.rows}}</td> -->
            <template v-for="items in item">
                <!-- <td>{{items}}</td> -->
                <template v-for="itemss in items">
                    <td>{{itemss}}</td>
                </template>
            </template>
        </tr>
    </table>
</div>

<div id="app">
    <table>
        <tr v-for="item in checkerboard" >
            <!-- <td>{{item}}</td> -->
            <!-- <td>{{item.rows}}</td> -->
            <template v-for="items in item">
                <!-- <td>{{items}}</td> -->
                <template v-for="itemss in items">
                    <td>{{itemss.cell}}</td>
                </template>
            </template>
        </tr>
    </table>
</div>

四.总结：
这个过程有点像是在剥洋葱的过程，在前面两层的v-for的时候，{cell:0}外面都有数组框框起来，都是无法访问到的，只有在最后一层将[]去掉的时候，才能访问cell。