Vuejs中如何实现每次点击仅将对应data属性设为true其余置为false

安全阿岳

2026-9-27

实现方案

方案1：基于现有代码逻辑修改

只需要调整openOptions方法，先把所有同类属性重置为false，再单独设置点击的属性为true即可：

openOptions(e) {
  const optionClicked = e.target.text.toLowerCase();
  // 先把所有同类属性全部设为false
  ['recents', 'frontend', 'backend', 'devops', 'tutoriais'].forEach(key => {
    this[key] = false
  })
  // 单独设置点击的属性为true
  this[optionClicked] = true
  // 如果需要支持点击已激活项取消选中，替换上面一行代码为下面这段即可
  // const currentVal = this[optionClicked]
  // this[optionClicked] = !currentVal
}

方案2：更简洁的优化实现

不建议定义多个布尔值来控制选中状态，直接用单个变量存储当前激活的选项即可，后续维护更方便：

调整data定义：

data() {
  return {
    activeOption: '' // 存储当前选中的选项名，未选中时为空值
  }
}

调整openOptions方法：

openOptions(e) {
  const optionClicked = e.target.text.toLowerCase();
  this.activeOption = optionClicked
  // 如果需要支持点击已激活项取消，替换上面一行代码为下面这段即可
  // this.activeOption = this.activeOption === optionClicked ? '' : optionClicked
}