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>