成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用Vue JS實(shí)現(xiàn)Accordian效果

paney129 / 2400人閱讀

摘要：綜述用的部分實(shí)現(xiàn)效果，實(shí)現(xiàn)效果。循環(huán)每個(gè)顯示與否由取值決定，當(dāng)時(shí)就顯示，否則隱藏。點(diǎn)擊時(shí)改變的值以此來影響的現(xiàn)實(shí)與隱藏。其方法有三個(gè)隱藏元素，顯示元素，隱藏和顯示之間的過渡效果。法三沒有過渡效果。直接給的元素應(yīng)用函數(shù)

1 綜述

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

2 過程

構(gòu)建相應(yīng)的Component

利用Bootstrap寫相應(yīng)的template

注冊(cè)Component，完成相關(guān)的數(shù)據(jù)、屬性、方法

2.1 構(gòu)建相應(yīng)的Component
2.2 利用Bootstrap寫相應(yīng)的template
2.3 注冊(cè)Component，完成相關(guān)的數(shù)據(jù)、屬性、方法

為了讓數(shù)組變?yōu)閷?duì)象，因此我們要給panel設(shè)置item屬性，并賦值為數(shù)組panels，同時(shí)在注冊(cè)compnent是也要聲明屬性。



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

實(shí)例化Vue，給數(shù)組panels賦值，由于v-show指令需要數(shù)值變化，不能給相應(yīng)的值一個(gè)全局?jǐn)?shù)據(jù)，所以在每一個(gè)對(duì)象中應(yīng)該設(shè)置show這個(gè)數(shù)據(jù)。

   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}
          ]
      }
   });

循環(huán)panel,每個(gè).panel-body顯示與否由show取值決定，當(dāng)show=true時(shí)就顯示.panel-body，否則隱藏。點(diǎn)擊.panel-title時(shí)改變show的值以此來影響.panel-body的現(xiàn)實(shí)與隱藏。

給.panel-body設(shè)置動(dòng)畫效果，需要指明transition=x和設(shè)置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 總結(jié)

將數(shù)組轉(zhuǎn)換為對(duì)象并取值，需要給component顯示聲明屬性

每個(gè)地方的值需要由body.show獲得

component的過度效果，需要定義transition名，并設(shè)置相應(yīng)的-enter,-leave效果

4 用jQuery實(shí)現(xiàn)

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79834.html

相關(guān)文章

  • vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

    luffyZh 評(píng)論0 收藏0

  • vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

    daydream 評(píng)論0 收藏0

  • vue.js實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的簡(jiǎn)歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

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

    FleyX 評(píng)論0 收藏0

  • 一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實(shí)踐項(xiàng)目

    摘要：利用中間件實(shí)現(xiàn)異步請(qǐng)求，實(shí)現(xiàn)兩個(gè)用戶角色實(shí)時(shí)通信。目前還未深入了解的一些概念。往后會(huì)寫更多的前后臺(tái)聯(lián)通的項(xiàng)目。刪除分組會(huì)連同組內(nèi)的所有圖片一起刪除。算是對(duì)自己上次用寫后臺(tái)的一個(gè)強(qiáng)化，項(xiàng)目文章在這里。后來一直沒動(dòng)，前些日子才把后續(xù)的完善。 歡迎訪問我的個(gè)人網(wǎng)站：http://www.neroht.com/? 剛學(xué)vue和react時(shí)，利用業(yè)余時(shí)間寫的關(guān)于這兩個(gè)框架的訓(xùn)練，都相對(duì)簡(jiǎn)單，有的...

    tangr206 評(píng)論0 收藏0

  • 用vue2.6實(shí)現(xiàn)一個(gè)抖音很火的【時(shí)間輪盤】屏保小DEMO

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

    wind5o 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<