這篇文章主要介紹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怎么實現點擊展開點擊收起效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章標題：vue怎么實現點擊展開點擊收起效果-創新互聯
轉載源于：http://vcdvsql.cn/article38/ddhosp.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、域名注冊、網站內鏈、自適應網站、品牌網站建設、網站收錄

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯