折叠效果

折叠效果功能实现– vue

div

<div v-for="item in showList"><div>
<div @click="showAll = !showAll">{{world}}</div>

---

data

data(){
    return {
        showAll: false,
        toLearnList:['xuesong','fengge','liwei','yaru','kaisheng','anqing']
    }
}

---

computed

computed:{
   showList:function(){
     if(this.showAll == false){                    //当数据不需要完全显示的时候
       var showList = [];　　　　　　　　　　　　　　　 //定义一个空数组
       if(this.toLearnList.length > 3){　　　　　　　//这里我们先显示前三个
         for(var i=0;i<3;i++){
           showList.push(this.toLearnList[i])
         }
       }else{
         showList = this.toLearnList
       }
       return showList;　　　　　　　　　　　　　　　　 
     }else{
       return this.toLearnList;
     }
   },
   world(){
      if(this.showAll == false){　
       return '点击展开'
     }else{
       return '点击收起'
     }
   }
 },