vue怎么實現(xiàn)點擊展開點擊收起效果

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

創(chuàng)新互聯(lián)建站是一家專業(yè)提供永安企業(yè)網(wǎng)站建設,專注與做網(wǎng)站、成都網(wǎng)站設計、H5建站、小程序制作等業(yè)務。10年已為永安眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

vue是什么

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

  首先定義一下data里面的數(shù)據(jù)：

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

  使用computed對data進行處理：

computed:{
  showList:function(){
   if(this.showAll == false){          //當數(shù)據(jù)不需要完全顯示的時候
    var showList = [];　　　　　　　　　　　　　　　 //定義一個空數(shù)組
    if(this.toLearnList.length > 3){　　　　　　　//這里我們先顯示前三個
     for(var i=0;i<3;i++){
      showList.push(this.toLearnList[i])
     }
    }else{
     showList = this.toLearnList
    }
    return showList;　　　　　　　　　　　　　　　　 //返回當前數(shù)組
   }else{
    return this.toLearnList;
   }
  },
  word:function(){
   if(this.showAll == false){　　　　　　　　　　　//對文字進行處理
    return '點擊展開'
   }else{
    return '點擊收起'
   }
  }
 }

template：循環(huán)的時候直接用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怎么實現(xiàn)點擊展開點擊收起效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：vue怎么實現(xiàn)點擊展開點擊收起效果
網(wǎng)站鏈接：http://bm7419.com/article38/jddhsp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、手機網(wǎng)站建設、標簽優(yōu)化、網(wǎng)站制作、網(wǎng)站收錄、企業(yè)網(wǎng)站制作

廣告

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