Villkorlig rendering/visning i Vue med v-if, v-show, v-else och v-else-if

Beskrivning

Vue.js är ett enkelt ramverk för webbappar för att skapa dynamiska webbgränssnitt och Single-Page Apps (SPA). När vi skapar dessa appar vill vi ofta återge något baserat på ett visst kriterium – detta är kärnan i villkorlig återgivning.

Villkorlig rendering hänvisar till förmågan att återge distinkt användargränssnitt (UI) markering baserat på om ett villkor är sant eller inte. Det här begreppet används ofta i sammanhang som att visa eller dölja komponenter (växla), byta programfunktionalitet, hantera autentisering och auktorisering och många fler.

I den här artikeln kommer vi att titta på olika sätt att villkorligt rendera i Vue.js genom att använda v-if, v-else-ifoch v-else direktiv. Vi kommer också att ta en titt på några exempel och belysa skillnaden mellan v-if och v-show.

v-if

Smakämnen v-if direktiv är van vid villkorligt återge ett block betyder blocket med v-if attribut kommer endast att vara produceras om direktivets uttryck återkommer en true värde. Om uttrycket ger ett ogiltigt resultat (t.ex. null, 0, tom sträng, false), elementet är raderade från DOM.

Låt oss illustrera detta beteende med det praktiska exemplet:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Eftersom login är inställd på true, den <div> block som innehåller v-if direktiv kommer att produceras och visas på så sätt.

v-if vs v-show

Det är värt att notera att v-show skulle också fungera i exemplet ovan och skulle fungera till synes identiskt, men det finns en skillnad mellan de två.

v-if villkorligt återger ett element, medan v-show villkorligt visar/visar ett element.

Detta innebär att när villkoret växlas, v-if kommer faktiskt att ta bort och återställa komponenter wile v-show gör dem bara osynliga eller synliga. Följande animation illustrerar hur v-if tar faktiskt bort och reproducerar kodblock:

Under tiden, v-show kommer alltid att behålla elementet i DOM och kommer bara att ändra dess CSS för att växla dess utseende (genom att ställa in dess display till none):

v-annat

Smakämnen v-else direktiv är en v-if direktiv som låter dig anpassa false värde i villkorliga renderingar. Om det inte är det true, Kan du använda v-else att definiera vad som ska hända istället.

Anta till exempel att vi har ett lösenordsinmatning, och vi vill att det ska ge ett felmeddelande, "Svagt lösenord", om längden på ingången är mindre än 6 eller display "Starkt lösenord" om längden är större än 6.

Detta är en villkorlig återgivning, med ett alternativ för att hantera det falska fallet:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Låt oss använda detta för att växla innehållet på en enkel inloggningssida så att det ändrar meddelandet baserat på om en användare är inloggad eller inte. Vi kommer att ändra knapptexten baserat på userLoggedIn status också:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

Knappens klickhändelse växlar userLoggedIn dataobjekt, och detta kommer att påverka data som visas enligt nedan:

v-annat-om

v-else-if extends a v-if med en else...if blockera. Detta liknar JavaScript else...if blockera genom att det tillåter oss att lägga till en if-sats till en befintlig v-if. Detta används när det finns många kriterier att kontrollera och kan kedjas flera gånger:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Slutsats

I den här artikeln har vi sett hur man villkorligt renderar ett element med v-if, v-elseoch v-else-if. Vi förklarade också skillnaden mellan v-if och v-show.

• Myntsmart. Europas bästa bitcoin- och kryptobörs.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. FRI TILLGÅNG.
• CryptoHawk. Altcoin radar. Gratis provperiod.
• Källa: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/