需求：
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> 赞 (0)
相关推荐
-
蓝牙耳机只有一个耳朵有声（蓝牙就一个耳机有声音怎么办）
蓝牙耳机品牌，品类繁多，质量上也是良莠不齐，除了音质、降噪、延迟等关键指标外，蓝牙耳机的连接便携性也往往影响使用者的体验。比如，这篇小文我们探讨一下“蓝牙耳机一只有声音一只没声音”的原因以及解决办法。 1...
-
微信加好友过多被限制怎么办（如何解决微信加好友频繁受限）
现在微信月活跃人数已经超了 10 亿大关！2018 不管是做微商，电商，还是其 他，主要沟通或者引流终点还是在微信，或者 qq 上！但是这段时间，所有互联网媒体和社交平台，资讯平台等都都进行了严控！ 而微信呢，之前...
-
vivos15pro开箱外观评测（vivos15pro全网比较全面的测评）
在国产手机市场持续低迷的情况下，vivo却接二连三地发布新品，展现出强劲的发展势头。在先后发布X Note 等“商务三剑客”、年度旗舰X80系列，在新锐T系列之前，我们迎来了S系列的年度迭代新品S15系列。5月19日，vivo正...
-
盛年不重来一日难再晨的意思简短（原文出处解释）
盛年不重来，一日难再晨。 解析释义 精力旺盛的青春年华一旦过去便不可能再来，一天之中永远看不到第二次日出。比喻时光容易流失，不会返回，因而我们应当珍惜每一寸光阴。 出处作者 《杂诗十二首・其一》，作者陶渊...
-
全手工和半手工紫砂壶的特点区别（真相了解）
入壶圈，无论是新手菜鸟还是资深玩家，都绕不开一个话题：全手工壶和半手工壶的区别，全手工紫砂壶和半手工紫砂壶不仅是新老壶友玩家的分水岭，也是消费力或者消费层次的一个区隔点。 有些壶友在平日交流紫砂壶过程...
-
五笔输入法教程（五笔输入法教程口诀）
五笔是五笔字型输入法的简称。是目前中国以及一些东南亚的国家，如新加坡、马来西亚等国，最常用的一种汉字输入法之一，发明人王永民。学名：“惠邦五行码”百虎输入法。 人们常说的五笔86版，98版，18030版，新世纪版...
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。