用vue框架寫(xiě)了個(gè)小例子，但是感覺(jué)對(duì)數(shù)據(jù)的操作綁定做的不是很好

下面是一個(gè)簡(jiǎn)單的層級(jí)關(guān)聯(lián)選項(xiàng)，代碼如下。因?yàn)槔锩媸褂玫暮芏嗟难h(huán)，所以感覺(jué)要是數(shù)據(jù)一龐大起來(lái)，那么將會(huì)是很消耗內(nèi)存的，但是又要達(dá)到例子中這樣的效果，不知道是否有更好的優(yōu)化方式，想了很久，還是沒(méi)有想出更好的數(shù)據(jù)操作方式。不知哪位路過(guò)的大神能夠幫忙分析分析下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
    * {
        margin: 0;
        padding: 0    
    }
    .box2 {
        display: flex;
        padding: 20px;
        border-bottom: 1px solid #ccc    
    }
    label {
        margin: 0 10px    
    }
    .box2 > label {
        width: 10%    
    }
    input[type='checkbox'] {
        margin: 0 10px 10px 0    
    }
    .box3 {
        display: flex;
        flex: 1;
        flex-wrap: wrap
    }
</style>
</head>

<body>
    <div class="app">
        <div class="con">
        
            <div class="box1" v-for="( value1, key1 ) in info">
                <div class="box2" v-for="( value2, key2 ) in value1.child">
                    <label>
                        <input type="checkbox" v-model="value1.checked" v-if="key2 === 0" v-on:change="change( [ key1 ], value1.checked )">
                        <span v-if="key2 === 0 && value1.child.length > 0">{{ value1.name }}</span>
                        </label>
                    <label>
                        <input type="checkbox" v-model="value2.checked" v-on:change="change( [ key1, key2 ], value2.checked )">
                        <span>{{ value2.name }}</span>
                    </label>
                    <div class="box3">
                        <label v-for="( value3, key3 ) in value2.child">
                            <input type="checkbox" v-model="value3.checked" v-on:change="change( [ key1, key2, key3 ], value3.checked )">
                            <span>{{ value3.name }}</span>
                        </label>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue( {
            el: ".app",
            data: {
                info: [
                    {
                        name: "第一級(jí)",
                        checked: false,
                        child: [
                            {
                                name: "第二級(jí)",
                                checked: false,
                                child: [
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    },
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    },
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    }
                                ]    
                            },
                            {
                                name: "第二級(jí)",
                                checked: false,
                                child: [
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    },
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    },
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    }
                                ]    
                            }
                        ]    
                    },
                    {
                        name: "第一級(jí)",
                        checked: false,
                        child: [
                            {
                                name: "第二級(jí)",
                                checked: false,
                                child: [
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    },
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    },
                                    {
                                        name: "第三級(jí)",
                                        checked: false,
                                        child: []    
                                    }
                                ]    
                            }
                        ]    
                    }
                ]    
            },
            methods: {
                setChild: function( info, checked ) {
                    if ( info.child.length > 0 ) {
                        for ( var i = 0; i < info.child.length; i++ ) {
                            info.child[ i ].checked = checked;
                            this.setChild( info.child[ i ], checked );    
                        }    
                    }        
                },
                change: function( arr, checked ) {
                    var sign = 0;
                    var info = this.$data.info[ arr[ sign ] ];
                    if ( checked ) {
                        while ( arr[ ++sign ] !== undefined ) {
                            info.checked = true;
                            info = info.child[ arr[ sign ] ];    
                        }
                        this.setChild( info, true );
                    } else {
                        while ( arr[ ++sign ] !== undefined ) {
                            info = info.child[ arr[ sign ] ];    
                        }
                        this.setChild( info, false );    
                    }
                }
            }
        } );
    </script>
</body>
</html>

回答

編輯回答