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

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作为2项的包装器。如果这三个项目应该在相同的水平上的话，这就更有意义了。

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>

Answer 2

您可以将v-else与虚拟元素template一起使用，它不会破坏html元素的结构：

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

Answer 3

对我来说，这绝对是代码2。它更清晰和更好的结构，此外，您避免重复(这里：“条件-2”)。另外，至少从我的角度来看，外部用户更容易在第二段代码中找到自己的方法。

此外，我认为您也应该使用嵌套结构，否则这将是非常没有意义的。

对我个人来说，代码1根本不是一种选择。

您还可以在这两种代码中使用v-else。我认为它比v-if这样的两倍聪明一点：

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