Vue.js实现点击元素单独显示/再次点击恢复全部显示的方法

嘿，我来帮你搞定这个点击切换的需求！其实只需要加个状态变量追踪选中项，再调整一下列表的显示逻辑就搞定了，下面是具体的修改步骤和完整代码：

1. 添加状态变量 #

首先在Vue的data里新增一个selectedFriend变量，用来记录当前选中的朋友对象，初始值设为null（表示没有选中任何项）：

data: {
  keyword: '',
  friends: [
    { name: "Donnie", age: "20" },
    { name: "Joanne", age:"19" },
    { name: "David", age: "26" },
    { name: "Peter", age: "23" },
    { name: "John", age: "29" },
    { name: "Jason", age: "19" },
  ],
  selectedFriend: null // 新增：追踪选中的朋友
},

2. 修正点击方法逻辑 #

把原来的exclude方法改成切换选中状态的逻辑：如果点击的朋友已经是选中状态，就清空选中（恢复显示全部）；如果没选中，就把它设为当前选中项：

methods:{
  toggleSelect(friend) {
    // 如果当前选中的就是这个朋友，就取消选中；否则选中它
    this.selectedFriend = this.selectedFriend === friend ? null : friend;
  }
}

（我把方法名改成了toggleSelect，比exclude更贴合功能，你也可以保留原来的名字，只要逻辑对就行）

3. 调整列表过滤逻辑 #

还要修改filteredList计算属性，把搜索过滤和选中状态结合起来：如果有选中的朋友，就只返回这个朋友（同时要满足搜索条件）；如果没有选中，就返回所有符合搜索条件的朋友。另外顺便修正你原来代码里的搜索逻辑问题——用+连接includes会把布尔值转成数字相加，应该用||表示“或”的关系：

computed: {
  filteredList() {
    // 先做基础的搜索过滤
    const filtered = this.friends.filter((friend) => {
      const nameMatch = friend.name.toLowerCase().includes(this.keyword.toLowerCase());
      const ageMatch = friend.age.includes(this.keyword);
      return nameMatch || ageMatch; // 用||替代+，逻辑更准确
    });

    // 如果有选中的朋友，就只返回这个朋友（前提是它在过滤后的列表里）
    if (this.selectedFriend) {
      return filtered.filter(friend => friend === this.selectedFriend);
    }

    // 没有选中的话，返回全部过滤后的列表
    return filtered;
  }
},

4. 更新HTML模板 #

最后把模板里的点击事件改成我们新的方法：

<div v-for="friend in filteredList" class="card" @click="toggleSelect(friend)">
  {{friend.name}} - {{friend.age}}
</div>

这样就完成啦！现在的效果是：

• 点击任意朋友卡片，会只显示这个卡片，隐藏其他所有
• 再次点击这个显示的卡片，就会恢复显示所有符合搜索条件的朋友
• 搜索功能也能正常工作，不管是全列表还是单元素状态下，搜索关键词都会生效

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