如何使用Javascript统计Vue模板中container下的div子元素总数

问题本质 #

你的判断正确，v-if 属于条件渲染指令，判定结果为false的元素不会被挂载到DOM树中，因此通过DOM查询只能统计到当前满足渲染条件的元素，无法拿到全部子元素的总数。你之前两次查询结果不对，除了v-if的特性外，第一次返回0大概率是查询代码执行时机早于Vue组件挂载完成的时间，DOM还未生成；第二次返回2是当时仅2个元素满足v-if条件被渲染。

解决方案 #

优先推荐Vue生态下的数据驱动方案，完全不需要依赖DOM查询，稳定性和可维护性更高：

方案1：用数组维护步骤列表（推荐） #

把所有步骤定义为响应式数组，渲染时用v-for遍历，总步数直接取数组的length属性即可：

<template>
 <div id="container">
  <div 
    v-for="(component, index) in stepList" 
    v-if="currentStep === index" 
    :key="index"
  >
    {{ component }}
  </div>
 </div>
 <!-- 页面指示器直接使用数据层的变量，无需查询DOM -->
 <div class="step-indicator">
  当前第 {{ currentStep + 1 }} 步 / 共 {{ stepList.length }} 步
 </div>
</template>

<script setup>
import { ref } from 'vue'
// 所有步骤统一维护，后续新增/减少步骤只需修改这个数组
const stepList = ref(['Component1', 'Component2', 'Component3', 'Component4'])
const currentStep = ref(0) // 控制当前展示的步骤索引

// 下一步切换逻辑
const handleNext = () => {
  if (currentStep.value < stepList.value.length - 1) {
    currentStep.value++
  }
}
</script>

方案2：替换v-if为v-show #

如果你不想调整现有模板结构，可以把v-if替换为v-show：v-show的特性是所有元素始终会被挂载到DOM中，仅通过display: none控制显隐，此时即可通过DOM查询拿到全部子元素的数量。注意查询代码要放在onMounted生命周期中，确保DOM已渲染完成：

<template>
 <div id="container">
  <div v-show="currentStep === 0">
   Component1
  </div>
  <div v-show="currentStep === 1">
   Component2
  </div>
  <div v-show="currentStep === 2">
   Component3
  </div>
  <div v-show="currentStep === 3">
   Component 4
  </div>
 </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const currentStep = ref(0)

onMounted(() => {
  // 此时所有子元素已挂载，可查询到正确的总数4
  const totalSteps = $("#container").children().length
  console.log(totalSteps)
})
</script>

注意事项 #

不推荐在Vue项目中使用jQuery查询DOM来获取业务相关的状态值，Vue是数据驱动视图的框架，所有状态计算优先从数据层取值，可避免DOM和数据不同步导致的异常问题。

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