点击哪个li，展示哪个li的详情，每次只展示一个，其它的隐藏。 v-show

实现点击一个 li 元素展示其详情，同时隐藏其它 li 元素的详情，可以使用 v-show 指令结合事件处理函数来实现。具体实现步骤如下：

1. 在每个 li 元素上绑定一个点击事件，例如 @click="showDetail(index)"，其中 index 表示当前 li 元素的下标。

2. 在 data 中定义一个变量 selected，用于记录当前选中的 li 元素的下标，默认值为 -1。

3. 在 showDetail 方法中，先将选中的 li 元素的下标赋值给 selected，然后遍历所有 li 元素，根据当前元素的下标和 selected 的值来判断该元素是否应该显示，如果当前元素的下标等于 selected，则显示该元素的详情，否则隐藏该元素的详情。

具体代码实现如下：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index" @click="showDetail(index)">
      {{ item.title }}
      <div v-show="selected === index">{{ item.detail }}</div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: '标题1', detail: '详情1' },
        { title: '标题2', detail: '详情2' },
        { title: '标题3', detail: '详情3' }
      ],
      selected: -1
    }
  },
  methods: {
    showDetail(index) {
      this.selected = index;
      for (let i = 0; i < this.items.length; i++) {
        if (i === index) {
          // 当前选中的 li 元素
          this.$set(this.items[i], 'showDetail', true);
        } else {
          // 其它 li 元素
          this.$set(this.items[i], 'showDetail', false);
        }
      }
    }
  }
}
</script>

在上面的代码中，我们使用了 $set 方法来动态添加一个 showDetail 属性来记录每个 li 元素的详情是否应该显示。需要注意的是，由于 showDetail 是动态添加的属性，因此需要使用 $set 方法来添加，否则 Vue.js 无法监听到该属性的变化。