Vue 实现数据超过三条展开收起功能

项目描述

技术实现

1. 在data里添加字段控制展示收起的展示

   data(){
       return{
            showDisplay :false,//控制展示收起
       }
   }
   

2. 在computed里做数据处理

   computed:{
        testList() {
        // 当数据不需要完全显示的时候
        if(this.showDisplay == false){          
          let testList = []; // 定义一个空数组
          // 先显示前三个
          if(this.addressList.length > 3){　　　　　　　
            for(var i = 0;i < 3;i++){
              testList.push(this.addressList[i])
          }
          }else{
                testList = this.addressList;
          }
            return testList; // 返回当前数组
          }
        else{//展示全部数据
          return this.addressList;
        }
    },
   }
   

3. 页面渲染

   <div @click="showDisplay = !showDisplay" v-if="addressList.length>3" class="showMore">
        <span>
            {{!showDisplay?"展开":"收起"}}
        </span>
        <img :src="showDisplay?require('./assets/upArrow.png'):require('./assets/downArrow.png')" alt="">
    </div>