Vue中点击列表项如何单独显示对应类别的元素？

看起来你现在遇到的核心问题是所有内容区块都绑定了同一个show变量，所以不管点击哪个列表项，都会同时显示或隐藏所有内容。咱们可以通过记录当前激活的标签页来实现“点击对应项仅显示对应类别”的需求，具体修改步骤如下：

1. 调整Vue的数据结构 #

把原来单一的show布尔值，改成用来存储当前选中类别名称的activeTab变量，初始值可以设为null（默认不显示任何内容），如果你想默认展示第一个类别，也可以直接设为'stock'。

data: {
  activeTab: null, // 初始无激活状态，也可设为'stock'默认显示第一个内容
},

2. 更新点击方法逻辑 #

每个列表项的点击方法不再操作统一的布尔值，而是把activeTab设置为对应的类别标识，同时保留“点击当前激活项可隐藏内容”的原有逻辑：

methods: {
  mystock() {
    // 如果当前已经选中stock，点击就隐藏；否则切换显示stock
    this.activeTab = this.activeTab === 'stock' ? null : 'stock';
  },
  myprice() {
    this.activeTab = this.activeTab === 'price' ? null : 'price';
  },
  myfinance() {
    this.activeTab = this.activeTab === 'finance' ? null : 'finance';
  },
  myreport() {
    this.activeTab = this.activeTab === 'reports' ? null : 'reports';
  }
}

3. 修改内容区块的显示绑定 #

把每个内容div的v-show="show"，改成判断activeTab是否等于当前区块的类别名称：

<div class="col-md-8 pd-0">
  <transition name="fade">
    <div class="stock" v-show="activeTab === 'stock'"> this is stock </div>
  </transition>
  <transition name="fade">
    <div class="price" v-show="activeTab === 'price'"> this is price </div>
  </transition>
  <transition name="fade">
    <div class="financial" v-show="activeTab === 'finance'"> this is finance </div>
  </transition>
  <transition name="fade">
    <div class="reports" v-show="activeTab === 'reports'"> this is reports </div>
  </transition>
</div>

（可选）优化代码，减少重复冗余 #

如果想让代码更简洁易维护，不用写一堆重复的methods，可以给所有列表项绑定统一的点击事件，把类别名作为参数传递：

优化后的HTML列表： #

<ul class="investor-item">
  <li>
    <a @click="switchTab('stock')">Stock Information</a>
  </li>
  <li>
    <a @click="switchTab('price')">Price Sensitive Information</a>
  </li>
  <li>
    <a @click="switchTab('finance')">Financial Information</a>
  </li>
  <li>
    <a class="stocks" @click="switchTab('reports')">Reports</a>
  </li>
</ul>

优化后的Script： #

<script>
new Vue({
  el: '#root',
  data: {
    activeTab: null,
  },
  methods: {
    switchTab(tabName) {
      // 统一处理切换逻辑：点击当前激活项则隐藏，否则切换到对应项
      this.activeTab = this.activeTab === tabName ? null : tabName;
    }
  }
})
</script>

这样后续再新增列表项时，只需要在HTML里添加对应标签名的参数即可，不用再编写新的方法，代码扩展性更强。

内容的提问来源于stack exchange，提问作者MD.ALIMUL Alrazy