vue手风琴效果代码（vue实现手风琴效果）

需求：1、每个按钮都能点击展开和收起功能

vue实现手风琴效果

需求：

2、所有按钮下的内容只展示一个，（A内容展示时，点击B按钮，B内容展示，A内容收起）

<style>button{ margin-bottom: 30px }</style><div id="app">    <ul>    <li v-for="(list,index) in lists" :key="index">    {{list.id}}    <button @click="isShow(list.id)"  > {{idx==list.id?'收起':'展开'}}</button>    <div v-show="idx==list.id">{{list.name}}</div>    </li>    </ul>           </div><script src="http://cdn.staticfile.org/vue/2.6.11/vue.js"></script>

<script>new Vue({el: '#app',data() {return {lists:[{id:1,name:"aa"},{id:2,name:"bb"},{id:3,name:"cc"}],idx:-1,}},methods: {isShow(id) {// 如果用户点击的时候，当前判断展开的标识idx,是-1，的时候，那说明，用户要展开，那么就把id赋给idx ,标识，这样用户就展开了if (this.idx == -1) {this.idx = id;} else if (this.idx == id) {//如果用户点击的id 和上次点击的id一样的时候，那就说明，用户点击的是上一次点击展开变成收起的按钮那行this.idx = -1;} else {//如果用户点击的id和标识idx不相等，那么说明用户点击了其他想要展开的行this.idx = id;}// 简化// if(this.idx == id){// this.idx = -1;// }else{// this.idx = id;// }}},})</script>

上面就是小居数码小编今天给大家介绍的关于（vue实现手风琴效果）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• 如何用ps制作3d文字效果（用ps做3d文字效果图）
• 模糊的照片怎样恢复像素（去除照片模糊效果）
• ppt卷轴制作的步骤（ppt怎么制作卷轴效果）
• 在word中设置字体的文字效果需选择（Word设置字体）

（330）个朋友认为回复得到帮助。