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

<script>\tnew Vue({\t\tel: '#app',\t\tdata() {\t\t\treturn {\t\t\t\tlists:[\t\t\t\t\t{id:1,name:"aa"},\t\t\t\t\t{id:2,name:"bb"},\t\t\t\t\t{id:3,name:"cc"}\t\t\t\t],\t\t\t\tidx:-1,\t\t\t}\t\t},\t\tmethods: {\t\t\tisShow(id) {\t\t\t\t\t\t\t// 如果使用者點選的時候，當前判斷展開的標識idx,是-1，的時候，那說明，使用者要展開，那麼就把id賦給idx ,標識，這樣使用者就展開了\t\t\t\tif (this.idx == -1) {\t\t\t\t\tthis.idx = id;\t\t\t\t} else if (this.idx == id) {//如果使用者點選的id 和上次點選的id一樣的時候，那就說明，使用者點選的是上一次點選展開變成收起的按鈕那行\t\t\t\t\tthis.idx = -1;\t\t\t\t} else {//如果使用者點選的id和標識idx不相等，那麼說明使用者點選了其他想要展開的行\t\t\t\t\tthis.idx = id;\t\t\t\t}\t\t\t\t\t\t\t// 簡化\t\t\t\t// if(this.idx == id){\t\t\t\t// \tthis.idx = -1;\t\t\t\t// }else{\t\t\t\t// \tthis.idx = id;\t\t\t\t// }\t\t\t}\t\t},\t\t\t})\t</script>