Vue.js中如何统计v-show显示的元素（卡片）数量？

首先咱们得明确：v-show是通过修改元素的display属性控制显示/隐藏的，元素本身始终存在于DOM中——这一点和直接移除/添加DOM的v-if有本质区别，也是咱们解决问题的关键。

推荐方案：基于数据源计算（最符合Vue理念的做法） #

既然你的v-show依赖于checkArray(offer, speciality)这个条件，那最合理、最省心的方式就是直接从数据源入手统计满足条件的项数，完全不需要操作DOM。

假设这些<v-layout>是通过v-for循环渲染的（比如v-for="offer in offers"），你可以写一个计算属性实时统计：

computed: {
  visibleCardCount() {
    // 假设你的数据源是offers数组，speciality是当前搜索条件
    return this.offers.filter(offer => this.checkArray(offer, this.speciality)).length;
  }
}

不管搜索操作导致speciality或offers发生什么变化，这个计算属性都会自动响应更新，给你实时的可见卡片数量。这种方式完全依托Vue的响应式系统，避免了直接操作DOM带来的潜在问题。

兜底方案：监听DOM变化（当无法基于数据源计算时） #

如果你的场景特殊，没法直接从数据源统计（比如条件逻辑异常复杂，或者数据结构不支持），可以结合Vue的生命周期钩子和watch监听相关数据变化，待DOM更新完成后查询可见元素。

第一步，给所有带v-show的<v-layout>加一个统一类名，比如card-container：

<v-layout class="card-container" v-show="checkArray(offer, speciality)">
  <v-flex>
    <v-card> .... </v-card>
  </v-flex>
</v-layout>

然后在组件内监听搜索条件的变化，并用$nextTick确保DOM更新完成后再统计：

data() {
  return {
    visibleCount: 0,
    speciality: '' // 你的搜索条件变量
  }
},
watch: {
  speciality() {
    this.$nextTick(() => {
      // 筛选出实际可见的容器元素
      const visibleContainers = document.querySelectorAll('.card-container:not([style*="display: none"])');
      this.visibleCount = visibleContainers.length;
    });
  }
},
// 组件挂载完成后也要初始化统计一次
mounted() {
  this.$nextTick(() => {
    const visibleContainers = document.querySelectorAll('.card-container:not([style*="display: none"])');
    this.visibleCount = visibleContainers.length;
  });
}

更可靠的判断可见性方式是检查元素的offsetParent（display: none的元素offsetParent为null）：

this.$nextTick(() => {
  const allContainers = document.querySelectorAll('.card-container');
  let count = 0;
  allContainers.forEach(container => {
    if (container.offsetParent !== null) count++;
  });
  this.visibleCount = count;
});

为什么不推荐用$refs？ #

正如你看到的官方文档说明，$refs不是响应式的，它只会在组件首次渲染完成后赋值一次。当搜索操作导致元素显示/隐藏时，$refs不会自动更新，没法靠它实时获取最新的可见元素数量。除非每次数据变化都手动重新获取，但这本质上和直接操作DOM没区别，还不如上面的兜底方案清晰。

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