通过给每条数据添加字段的方法

设置一个原数据不存在的 属性(isShow)。

代码

<div class="nav-details" id="app">

    <transition-group enter-active-class="animated  fadeInDown">
        <div v-for="item in coursesData" v-show="isShow" :key="item.id">
            <div class="system-item">
                <div class="system-item-show">
                    <a :href="item.url" class="system-show-img">
                        <img :src="item.cover" onerror="this.src='/static/mobile/user/images/system-1.png'" alt="">
                    </a>
                    <div class="system-show-text">
                        <h4  v-cloak >{{item.title}}</h4>
                        <p v-text="item.lastTitle"></p>
                        <div class="system-show-btn">
                            <span class="system-btn-b" @click="isShow(item,$event)">展开</span>
                            <a :href="item.url">继续学习</a>
                        </div>
                    </div>
                </div>
                <ul class="system-item-hide clearfix" v-show="item.isShow">
                    <li v-for="c in item.children">
                        <div class="system-hide-abs"></div>
                        <a :href="item.url" class="system-hide-img">
                            <img :src="c.cover" onerror="this.src='/static/mobile/user/images/system-2.png'" alt="">
                        </a>
                        <div class="system-hide-text">
                            <h5  v-cloak >{{c.title}}</h5>
                            <div class="system-hide-jdt"><span :data-val="c.percent"></span></div>
                            <div class="system-hide-btn">
                                <p  v-cloak >已学{{c.percent}}</p>
                                <a :href="c.url"><i class="fa fa-caret-right"></i>继续学习</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </transition-group>
</div>

js代码，设置属性值为false并且取反

    methods:{
        isShow(item,event){
            if(!item.isShow){
                this.$set(item,'isShow',false)
                item.isShow=!item.isShow;
            }else{
                item.isShow=!item.isShow;
            }
        }
        ,