vue通過v-for渲染的列表，可以單獨操作的其中的列表的兩種方法

如圖，三個標題分別有多個子元素。通過點擊三個標題分別控制顯示和隱藏。上代碼

第一種情況：點擊 青1，其所有的標題下的列表全部隱藏，也就是只有一個標題的會顯示子元素

<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="images/top.png" alt="" v-show="aIndex == index"><img src="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,
                },]
            },            

 

 

第二種情況：點擊青1，顯示青1下的子元素。點擊青2或者其他，青1子元素依舊存在，不會有狀態的改變。

//通過點擊傳過來的當前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="images/top.png" alt="" v-show="item.show">
                        <img src="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;   
     }