html - 具有相同 v-if 的两个 div 元素或一个包装器？

Question

在这种情况下，您认为最佳做法是什么:

<div>
   <div v-if="condition-1">Show something</div>
   <div v-if="condition-2">Show something else</div>
   <div v-if="condition-2">Show some other thing</div>
</div>

或

<div>
   <div v-if="condition-1">Show something</div>
   <div v-if="condition-2">
      <div>Show something else</div>
      <div>Show some other thing</div>
   </div>
</div>

我想这归结为您如何评价 html 元素，对我来说，第一个选项是我更喜欢编写它的方式，因为我发现额外的 div 在第二个选项中没有服务于结构目的。您如何支持或反对这两者？

[编辑]如下面的答案所示，使用模板元素来保存条件是可行的方法

Answer 1

在这种情况下，我可能会使用 template 作为这两个项目的包装器。如果这 3 个项目应该处于同一级别，则更有意义。

https://v2.vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt

<div>
   <div v-if="condition-1">Show something</div>
   <template v-if="condition-2"> <!-- Or v-else -->
      <div>Show something else</div>
      <div>Show some other thing</div>
   </template>
</div>