在這種情況下，您認為最佳實踐是什么：
<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 沒有用于結構目的。你會如何爭論或反對這兩者？
uj5u.com熱心網友回復：
在這種情況下，我可能會template用作 2 個專案的包裝器。如果這 3 個專案應該在同一級別，則更有意義。
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>
uj5u.com熱心網友回復：
您可以使用不會破壞 html 元素結構的v-else虛擬元素template：
<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>
uj5u.com熱心網友回復：
對我來說，它絕對是CODE 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>
uj5u.com熱心網友回復：
絕對是第二種方式。作為一個容器，你應該使用模板標簽。您是否應該使用 if 或 else derektive 取決于兩個條件是否可以同時發生（if）或相互排斥（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>
uj5u.com熱心網友回復：
使用此方法可以避免代碼重復。
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/402896.html
標籤：