用Vue JS实现Accordian效果

paney129 发布于2019-08-19 18:40 / 2335人阅读

摘要：综述用的部分实现效果，实现效果。循环每个显示与否由取值决定，当时就显示，否则隐藏。点击时改变的值以此来影响的现实与隐藏。其方法有三个隐藏元素，显示元素，隐藏和显示之间的过渡效果。法三没有过渡效果。直接给的元素应用函数

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实现图片渐入效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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