<div class="items" v-for="(item,index) in list">

<div class="item_top"  @click="clickTitle(index)"> //通过当前列表的index和data里面自定义的aIndex属性进行判断，如果相同，就显示当前子元素<span class="title">

                         {{item.title}}

                      </span><div class="item_right"><span class="num">{{item.items.length}}个</span><img src="data:images/top.png" alt="" v-show="aIndex == index"><img src="data:images/bottom.png" alt="" v-show="!aIndex == index"></div></div><!-- 子列表 --><div class="item" v-for="(proItem,proIndex) in item.items"  v-show="aIndex == index">

                     {{proItem}}

    </div></div>

clickTitle:function(index){

        if(aIndex == index){ 

            aIndex = -1; 
}else{
     aIndex = index;
 } } 

//如果当前元素已经被点击并显示子列表，那么aindex肯定就等于index，
　　　　　　　　　　　

所以让aindex赋值为负值，所以此时，aindex和所有的标题的index都不相等，所以当前的被点击的会被隐藏。否则，当前被点击的被index赋值，并显示子元素

data: {

               aIndex:'', //定义一个中间变量

                list:[{

                    title:'青1',

                    items:[

                        '青岛市市立医院1','青岛市市立医院2','青岛市市立医院3'

                    ],

                    show: false, //在循环里面加一个状态判断条件，在方法里面通过show状态判断是显示还是隐藏

                },

                {

                    title:'青2',

                    items:[

                        '青岛市市立医院1','青岛市市立医院2'

                    ],

                    show: false,

                },

                {

                    title:'青3',

                    items:[

                        '青岛市市立医院1','青岛市市立医院2','青岛市市立医院3'

                    ],

                    show: false,

                },]

            },            

//通过点击传过来的当前item下的show属性，动态的切换显示和隐藏，不影响其他的列表

<div class="items" v-for="(item,index) in list">

    <div class="item_top"  @click="clickTitle(item)">

                    <span class="title">

                        {{item.title}}

                    </span>

                    <div class="item_right">

                        <span class="num">{{item.items.length}}个</span>

                        <img src="data:images/top.png" alt="" v-show="item.show">

                        <img src="data:images/bottom.png" alt="" v-show="!item.show">

                    </div>

                </div>

                <!-- 子列表 -->

                <div class="item" v-for="(proItem,proIndex) in item.items"  v-show="item.show">

                    {{proItem}}

   </div>

</div>

data: {

                list:[{

                    title:'青1',

                    items:[

                        '青岛市市立医院1','青岛市市立医院2','青岛市市立医院3'

                    ],

                    show: false, //在循环里面加一个状态判断条件，在方法里面通过show状态判断是显示还是隐藏

                },

                {

                    title:'青2',

                    items:[

                        '青岛市市立医院1','青岛市市立医院2'

                    ],

                    show: false,

                },

                {

                    title:'青3',

                    items:[

                        '青岛市市立医院1','青岛市市立医院2','青岛市市立医院3'

                    ],

                    show: false,

                },]

            },

clickTitle:function(item){

       //通过点击传过来的当前item下的show属性，动态的切换显示和隐藏，不影响其他的列表

          item.show = !item.show;

     }