1、每个按钮都能点击展开和收起功能
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>
