vue實現點擊當前的li，顯示當前的詳情並且關閉其他的

<template>
  <div id="appBox">
    <ul>
      <li v-for="(item,index) in itemList" :key='item.index' @click="showDetail(index, item.id)"> {{item.name}}
        <div class="detail" v-show="isShow === index">我是{{item.name}}</div>
      </li>
    </ul>
  </div>

</template>
<script>
export default {

  data () {
    return {
      isShow: 0, //這里默認為0，取到itemList數組里面第一條數據
      itemList: [
        { id: '1', name: '王源'},
        { id: '2', name: '易烊千璽'},
        { id: '3', name: '王俊凱'}
      ]
    }
  },
  methods: {
    showDetail: function (index, id) {
      let that = this;
      if (that.isShow === index) {
        that.isShow = -1;  //在這里就將它賦值為-1  由於：-1 !=  index 所以其他內容隱藏 ，被點擊的則打開
      } else {
        that.isShow = index;   //這里是把index賦值給isShow，isShow=index則顯示
      }
    }
  }
}
</script>

<style type="text/css">
* {
  list-style: none;
}
#appBox{
  width: 500px;
  height: 500px;
  margin:200px auto;
}
li{
  margin-top: 10px;
  cursor: pointer;
}
.detail {
  border: 2px solid skyblue;
  height: 50px;
  margin-top: 10px;
  width: 350px;
}

</style>