Vue.js点击实现单个目标元素显隐功能的问题咨询

算力阿峰

2026-10-2

问题根因

你当前的实现共用了全局唯一的isHidden状态，所有列表项的显隐逻辑都绑定了这同一个变量，所以状态更新后所有元素都会同步变化。

解决方案

根据你的列表生成方式，有两种常用实现方案：

方案1：适用于v-for渲染的动态列表

绝大多数多列表项场景都是用v-for遍历生成的，直接给每个列表项绑定独立的状态即可：

给原列表的每一项数据新增hidden字段，标识当前项的显隐状态：

// data 中定义的列表数据示例
list: [
  { id: 1, content: '列表项1', hidden: false },
  { id: 2, content: '列表项2', hidden: false },
  // 更多列表项...
]

修改点击方法，接收当前点击的列表项作为参数，单独修改它的状态：

showHide(item) {
  item.hidden = !item.hidden
}

模板中绑定事件和显隐逻辑：

<li 
  v-for="item in list" 
  :key="item.id" 
  @click="showHide(item)"
>
  {{ item.content }}
  <!-- 你要控制显隐的对应内容 -->
  <div v-show="!item.hidden">当前项的展开内容</div>
</li>

方案2：适用于写死的固定列表

如果列表项是硬编码在模板里的，可以用对象存储不同项的状态，用唯一key区分：

data中定义状态对象：

hiddenState: {
  item1: false,
  item2: false,
  item3: false
}

修改点击方法，接收状态key作为参数：

showHide(key) {
  this.hiddenState[key] = !this.hiddenState[key]
}

模板中绑定对应key：

<li @click="showHide('item1')">
  固定列表项1
  <div v-show="!hiddenState.item1">对应内容</div>
</li>
<li @click="showHide('item2')">
  固定列表项2
  <div v-show="!hiddenState.item2">对应内容</div>
</li>