Vue模板中是否有处理可能未定义值的类似可选链写法？

首先明确：Vue 3的模板原生支持?.可选链语法，如果你的项目用的是Vue 3，直接写displayedHours?.length完全可行，可能是之前没注意到或项目配置存在遗漏（Vue 3.0及以上版本均支持该语法）。

如果是Vue 2环境或确实无法使用可选链，给你几个更简便的替代方案：

• 用逻辑或兜底空数组：把可能未定义的变量和空数组做或运算，直接取length

  <div v-for="n in wantedHours.length - (displayedHours || []).length" :key="n"></div>
  

  原理是当displayedHours为undefined或null时，||会返回空数组，空数组的length自然为0，刚好匹配你的需求。

• 模板内直接写三元表达式：适合简单逻辑，比单独定义计算属性更简洁

  <div v-for="n in wantedHours.length - (displayedHours ? displayedHours.length : 0)" :key="n"></div>
  

当然你当前使用的计算属性方案也很稳妥，尤其是后续逻辑需要复用或变得复杂时，计算属性的可读性和可维护性会更强，完全可以继续沿用。

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