通过vue框架实现手风琴菜单（有什么写的不好的地方，请评论）

1. html

    <div id="app">
        <ul class="list">
            <li v-for="item,i in dataList">
                <a href="#" v-on:click="dianji(i)" v-bind:style="{background:index==i?'#faaf':'rgb(105, 218, 208)'}"
                    v-text="item.title"></a>
                <ul v-bind:style="{display:index==i?'block':'none'}" v-for="opt in item.list1">
                    <li v-text="opt.content">list1_content1</li>
                </ul>
            </li>
        </ul>

    </div>

2. css

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .list {
            width: 400px;
            margin: 100px auto 0;
            text-align: center;
        }

        .list>li {
            width: 400px;
        }

        .list>li a {
            display: block;
            width: 400px;
            height: 40px;
            background: rgb(105, 218, 208);
            line-height: 40px;
            color: #fff;
            text-decoration: none;
        }

        /* .list>li a:hover {
            text-decoration: underline;
            background: #faaf;
            color: aliceblue;
        } */

        .list>li>ul {
            display: none;

        }

        .list>li>ul>li {
            display: block;
            width: 400px;
            line-height: 40px;
            height: 40px;
            background: rgb(93, 201, 90);
        }
    </style>

3. js

var vm = new Vue({
            el: '#app',
            data: {
                dataList,
                index: -1
            },
            methods: {
                dianji(i) {
                    if (this.index == i) {
                        this.index = -1;
                    } else {
                        this.index = i;
                    }
                }
            }
        })

4. 数据

 var dataList = [{
            title: 'list1',
            list1: [{
                    content: 'list1_content1'
                },
                {
                    content: 'list1_content2'
                },
                {
                    content: 'list1_content3'
                }
            ]
        }, {
            title: 'list2',
            list1: [{
                    content: 'list2_content1'
                },
                {
                    content: 'list2_content2'
                },
                {
                    content: 'list2_content3'
                }
            ]
        }, {
            title: 'list3',
            list1: [{
                    content: 'list3_content1'
                },
                {
                    content: 'list3_content2'
                },
                {
                    content: 'list3_content3'
                }
            ]
        }, {
            title: 'list4',
            list1: [{
                    content: 'list4_content1'
                },
                {
                    content: 'list4_content2'
                },
                {
                    content: 'list4_content3'
                }
            ]
        }, ]