vue怎么實現點擊展開點擊收起效果

這篇文章主要介紹vue怎么實現點擊展開點擊收起效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

  首先定義一下data里面的數據：

data () {
  return {
   toLearnList:[
    'html','css','javascript','java','php'  //進行顯示的數據
   ],
   showAll:false, 　　　　　　　　　　　　　　　　//標記數據是否需要完全顯示的屬性
  }
 }

  使用computed對data進行處理：

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;
   }
  },
  word:function(){
   if(this.showAll == false){　　　　　　　　　　　//對文字進行處理
    return '點擊展開'
   }else{
    return '點擊收起'
   }
  }
 }

template：循環的時候直接用showList進行操作，顯示收起的事件直接用showAll = !showAll 進行控制，改變這個值的真假

<template>
 <div class="hello">
   <div v-for='item in showList'>{{item}}</div>
   <div @click="showAll = !showAll" class="show-more">{{word}}</div>
 </div>
</template>

以上是“vue怎么實現點擊展開點擊收起效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！