Vue如何点击按钮仅显示/隐藏对应列表项的详情Div？

这问题我之前踩过坑！你现在的核心问题是用了一个全局的isVisible变量来控制所有列表项的详情显示，所以一点击按钮，所有项的详情都会跟着切换状态。咱们只需要让每个列表项自己管理是否显示详情就可以解决，具体步骤如下：

1. 调整列表项的数据结构 #

给items数组里的每个对象添加一个isVisible属性，初始值设为false，用来单独控制当前项的详情显示状态：

data() {
  return {
    items: [
      // 示例数据，每个item新增isVisible属性
      { id: 1, text: "列表项1", isVisible: false },
      { id: 2, text: "列表项2", isVisible: false },
      { id: 3, text: "列表项3", isVisible: false }
    ],
    activeClass: 'is-visible'
  }
},

2. 修改模板的显示判断逻辑 #

把原来依赖全局isVisible的判断，改成依赖当前循环项的item.isVisible：

<ul>
  <li v-for="item in items" :key="item.id">
    <div>
      <p>{{item.text}}</p>
      <button @click="showDetails(item)">Show details</button>
    </div>
    <div class="details" :class="item.isVisible ? activeClass : 'hidden'">
      Some hidden details for {{item.text}}
    </div>
  </li>
</ul>

3. 更新点击方法的逻辑 #

不再操作全局变量，而是直接切换当前点击项的isVisible状态：

methods: {
  showDetails(item) {
    // 切换当前项的显示/隐藏状态
    item.isVisible = !item.isVisible;
  }
}

额外说明：如果列表数据来自后端 #

如果你的items是通过接口请求获取的，记得在拿到数据后给每个项添加isVisible属性，比如在请求成功的回调里：

// 假设这是你的接口请求逻辑
async fetchItems() {
  const res = await api.get('/your-items-api');
  this.items = res.data.map(item => ({
    ...item,
    isVisible: false // 给每个后端返回的item新增isVisible属性
  }));
}

这样修改后，点击某个列表项的“Show details”按钮，就只会显示当前项的详情内容啦～

内容的提问来源于stack exchange，提问作者ST80