vue通过v-for渲染的列表，可以单独操作的其中的列表的两种方法

Posted 2020-12-04 jsongoit

如图，三个标题分别有多个子元素。通过点击三个标题分别控制显示和隐藏。上代码

第一种情况：点击 青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;   
     }