vue $set 使用初体验 实现双层折叠面板（vant+vue）

实现功能：双层折叠面板 

vant实现父层 $set 实现第二层

<div class="bag_lists" v-for="(item, index) in ajustData" :key="index">

                <van-collapse v-model="activeNames" accordion>

                    <van-collapse-item :name="index+1">

                        <div slot="title">

                            <p class="parent_item">

                                <span class="color333 size28">{{item.updateDate}}</span>

                            </p>

                        </div>

                        <div>

                            <div v-for="(parent, parentInd) in item.records" :key="parentInd">

                                <p class="bag_li">

                                    <router-link :to="{ path: '/asset/fofdetails'}">

                                        <span

                                            v-changeColor="{index:parentInd}"

                                            class="left left_top size28"

                                        >{{parent.fofName}}</span>

                                        <span class="left left_bottom size24">{{parent.fofType}}</span>

                                        <span

                                            v-changeColor="{index:parentInd}"

                                            class="right size28"

                                        >

                                            {{parent.lastAssPackageratio | navFixed2}}%

                                            →

                                            {{parent.nowAssPackageratio | navFixed2}}%

                                        </span>

                                    </router-link>

                                    <i :class="[parent.isShow?'open rotate ':'open norotate']" @click="collapseChange(parent)"></i> {{parent.isShow}}

                                </p>

                                <div

                                    class="funds_li" 

                                    v-show='parent.isShow'

                                >

                                    <p

                                        v-for="(child, childIndex) in parent.fundChangeList"

                                        :key="childIndex"

                                    >

                                        <span class="size28 color999">{{child.fundName}}</span>

                                    </p>

                                </div>

                            </div>

                        </div>

                    </van-collapse-item>

                    <hr class="separate" />

                </van-collapse>

            </div>

控制显隐按钮

  <i :class="[parent.isShow?'open rotate ':'open norotate']" @click="collapseChange(parent)"></i> {{parent.isShow}}

运用css3动画

.open {

        display: block;

        width: 0.4rem;

        height: 0.4rem;

        background: url("../../assets/img/go_link.png");

        background-size: 0.4rem 0.4rem;

        transform: rotate(90deg);

        position: absolute;

        top: 0.3rem;

        right: 0.4rem;

    }

    .norotate{

        transition: all 0.5s;

    }

    .rotate{

        transform:rotate(-90deg);

        transition: all 0.5s;

    }

methods方法

collapseChange(item,parent, child) {

            console.log(item.isShow)

            if(!item.isShow){

                this.$set(item,'isShow',false)

                item.isShow = !item.isShow

            }else {

                item.isShow = !item.isShow;

            }

            console.log(item.isShow)

        },

 

搞定收工 

等我好好看下实现原理 暂时只是拿起来就用 

看好原理再更新