用Vue JS实现Accordian效果

1 综述

用Bootstrap的CSS部分实现CSS效果，VueJS实现Accordian效果。利用Vue JS的v-show或v-if指令，显示或隐藏panel-body

2 过程

1. 构建相应的Component

2. 利用Bootstrap写相应的template

3. 注册Component，完成相关的数据、属性、方法

2.1 构建相应的Component

2.2 利用Bootstrap写相应的template

     {{body.title}}     {{body.content}}

2.3 注册Component，完成相关的数据、属性、方法

1. 为了让数组变为对象，因此我们要给panel设置item属性，并赋值为数组panels，同时在注册compnent是也要声明属性。

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

1. 实例化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}          ]      }   });

1. 循环panel,每个.panel-body显示与否由show取值决定，当show=true时就显示.panel-body，否则隐藏。点击.panel-title时改变show的值以此来影响.panel-body的现实与隐藏。

    #### {{body.title}}    {{body.content}}

1. 给.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 总结

1. 将数组转换为对象并取值，需要给component显示声明属性

2. 每个地方的值需要由body.show获得

3. component的过度效果，需要定义transition名，并设置相应的-enter,-leave效果

4 用jQuery实现

1. 法一：点击.panel-title时获取相应的[data-target],给id=[data-target]添加或移除.in。这是Bootstrap中的实现方法。其方法有三个class..collapse隐藏元素，.collapse.in显示元素，.collapsing隐藏和显示之间的过渡效果。

2. 法二：直接给id=[data-target]的元素应用animate()函数，并设置height:toggle或直接使用slideToggle()函数。

3. 法三：没有过渡效果。直接给id=[data-target]的元素应用toggle()函数

关键字：JavaScript, vue.js, section, component

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！