用Vue JS實現Accordian效果

paney129 發布于2019-08-19 18:40 / 2382人閱讀

摘要：綜述用的部分實現效果，實現效果。循環每個顯示與否由取值決定，當時就顯示，否則隱藏。點擊時改變的值以此來影響的現實與隱藏。其方法有三個隱藏元素，顯示元素，隱藏和顯示之間的過渡效果。法三沒有過渡效果。直接給的元素應用函數

1 綜述

用Bootstrap的CSS部分實現CSS效果，VueJS實現Accordian效果。利用Vue JS的v-show或v-if指令，顯示或隱藏panel-body

2 過程

構建相應的Component

利用Bootstrap寫相應的template

注冊Component，完成相關的數據、屬性、方法

2.1 構建相應的Component

2.2 利用Bootstrap寫相應的template

2.3 注冊Component，完成相關的數據、屬性、方法

為了讓數組變為對象，因此我們要給panel設置item屬性，并賦值為數組panels，同時在注冊compnent是也要聲明屬性。



Vue.component("panel",{
    template:"#accordian-template"，
    props:["item"]
  })

實例化Vue，給數組panels賦值，由于v-show指令需要數值變化，不能給相應的值一個全局數據，所以在每一個對象中應該設置show這個數據。

   new Vue({
        el:"#app",
        data:{
          panels:[
             {title:"Section 1",content:"This is section 1",show:false},
             {title:"Section 2",content:"This is section 2",show:false},
             {title:"Section 3",content:"This is section 3",show:false}
          ]
      }
   });

循環panel,每個.panel-body顯示與否由show取值決定，當show=true時就顯示.panel-body，否則隱藏。點擊.panel-title時改變show的值以此來影響.panel-body的現實與隱藏。

給.panel-body設置動畫效果，需要指明transition=x和設置x.enter,x.leave

   
   {{body.content}}
 
 
 .toggle-enter,.toggle-leave{
         height:0;
         opacity:0;
         padding:0 15px;
    }
   .panel-body{
         transition:all 1s;
         overflow:hidden;
   }

3 總結

將數組轉換為對象并取值，需要給component顯示聲明屬性

每個地方的值需要由body.show獲得

component的過度效果，需要定義transition名，并設置相應的-enter,-leave效果

4 用jQuery實現

法一：點擊.panel-title時獲取相應的[data-target],給id=[data-target]添加或移除.in。這是Bootstrap中的實現方法。其方法有三個class..collapse隱藏元素，.collapse.in顯示元素，.collapsing隱藏和顯示之間的過渡效果。

法二：直接給id=[data-target]的元素應用animate()函數，并設置height:toggle或直接使用slideToggle()函數。

法三：沒有過渡效果。直接給id=[data-target]的元素應用toggle()函數

GPU云服務器云服務器 js實現放大鏡效果 js實現滿屏效果 js如何實現3d效果 js實現圖片漸入效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79834.html

vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實現一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續動畫，很簡單，就是清除定時器，然后重新調用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網。在網上看到一個這樣的網站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

luffyZh 2019-08-02 16:11 評論0 收藏0
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實現一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續動畫，很簡單，就是清除定時器，然后重新調用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網。在網上看到一個這樣的網站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

daydream 2019-08-23 16:46 評論0 收藏0
vue.js實現一個會動的簡歷(包含底部導航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實現一個簡單的這樣打字的效果，如下你可以狠狠點擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續動畫，很簡單，就是清除定時器，然后重新調用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網。在網上看到一個這樣的網站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

FleyX 2019-08-29 18:32 評論0 收藏0
一些基于React、Vue、Node.js、MongoDB技術棧的實踐項目

摘要：利用中間件實現異步請求，實現兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯通的項目。刪除分組會連同組內的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化，項目文章在這里。后來一直沒動，前些日子才把后續的完善。歡迎訪問我的個人網站：http://www.neroht.com/? 剛學vue和react時，利用業余時間寫的關于這兩個框架的訓練，都相對簡單，有的...

tangr206 2019-06-26 17:34 評論0 收藏0
用vue2.6實現一個抖音很火的【時間輪盤】屏保小DEMO

摘要：代碼如下轉動然后通過具體的秒分小時上下午星期日期月值轉動，來控制角度，而且當前值進行文字高亮。寫在前面：前段時間看抖音，有人用時間輪盤作為動態的桌面壁紙，一時間成為全網最火的電腦屏保，后來小米等運用市場也出現了【時間輪盤】，有點像五行八卦，感覺很好玩，于是突發奇想，自己寫一個網頁版小DEMO玩玩，先看看效果：在線體驗showImg(https://user-gold-cdn.xitu.io...

wind5o 2019-05-23 17:33 評論0 收藏0