¿Qué consideraría como mejor práctica en esta situación?
<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>o
<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>Supongo que se reduce a cómo valora los elementos html y, para mí, la primera opción es cómo preferiría escribirlo, ya que encuentro que el div adicional no tiene un propósito estructural en la segunda opción. ¿Cómo argumentarías a favor o en contra de los dos?
[Editar] Como se muestra en la respuesta a continuación, usar un elemento de plantilla para mantener la condición es el camino a seguir
Para mí definitivamente es CÓDIGO 2 . Es más claro y mejor estructurado, además de evitar duplicados (aquí: "condición-2"). Además, al menos desde mi punto de vista, es más fácil para un usuario externo orientarse en el segundo código.
Además, creo que también debería usar la estructura anidada ; de lo contrario, esto sería bastante inútil.
El Código 1, para mí personalmente, no es una opción en absoluto.
También puede usar v-else en ambos códigos. Creo que es un poco más inteligente que dos veces v-if así:
<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>Puede usar v-else con una template de elemento virtual que no rompa la estructura de sus elementos 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>En este caso, probablemente usaría template como envoltorio para los 2 elementos. Tiene más sentido en caso de que se suponga que los 3 elementos están en el mismo nivel.
https://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>Definitivamente la segunda forma. Y como contenedor, debe usar la etiqueta de plantilla. si debe usar if o else derektive depende de si ambas condiciones pueden ocurrir simultáneamente (if) o excluirse entre sí (else).
<div> <div v-if="condition-1">Show something</div> <div v-if="condition-2"> <!-- both condition can be show something--> <div>Show something else</div> <div>Show some other thing</div> </div> </div> // or <div> <div v-if="condition-1">Show something</div> <div v-else> <!-- only one condition can be true --> <div>Show something else</div> <div>Show some other thing</div> </div> </div>Con este método puede evitar la repetición de códigos.
<div> <div v-if="condition-1">Show something</div> <template v-if="condition-2"> <div>Show something else</div> <div>Show some other thing</div> </template> </div>