vue.js如何写折叠面板的列表

Question

就类似这样的 求大神看下

Answer 1

自己码啊，标题为一个层级，展开的内容为该层级下的另一个层级，通过v-show来控制其显示隐藏。如果是数组循环的话，设置一个数组变量。

<ul>

    <li v-for="(item,index) in list">

        <p>注册是支行信息如何进行填写？<span @click="changeContent(index)"></span></p>

        <div v-show="item.showContent">

            结算账户的填写...

        </div>

    </li>

</ul>

data(){

    return{

        list:[{'title':'注册是支行信息如何进行填写？','showContent':false,...},{'title':'注册是支行信息如何进行填写？','showContent':false,...}...]

    }

},

methods:{

    changeContent:function(index){

        var temp = this.list

        temp[index].showContent = ! temp[index].showContent

        this.list = temp

    }

}