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;   
     }