Rendering/Visualizzazione condizionale in Vue con v-if, v-show, v-else e v-else-if

Introduzione

Vue.js è un semplice framework per app Web per la creazione di interfacce Web dinamiche e App a pagina singola (SPA). Mentre creiamo queste app, spesso, lo vogliamo rendere qualcosa in base a un criterio particolare – questa è l'essenza del rendering condizionale.

Il rendering condizionale si riferisce alla capacità di eseguire il rendering di un markup dell'interfaccia utente (UI) distinto in base al fatto che una condizione sia vera o meno. Questa nozione viene spesso utilizzata in contesti come mostrare o nascondere componenti (commutazione), cambiare funzionalità dell'applicazione, gestire l'autenticazione e l'autorizzazione e molti altri.

In questo articolo, esamineremo vari modi per eseguire il rendering condizionale in Vue.js utilizzando il file v-if, v-else-ife v-else direttive. Daremo anche un'occhiata ad alcuni esempi ed evidenzieremo la differenza tra il v-if ed v-show.

v-se

I v-if la direttiva è abituata renderizzare condizionalmente un blocco intendendo il blocco con il v-if l'attributo sarà solo prodotta se l'espressione della direttiva restituisce a true valore. Se l'espressione produce un risultato non valido (ad esempio, null, 0, stringa vuota, false), l'elemento è cancellato dal DOM.

Illustriamo questo comportamento nell'esempio pratico:

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

Dal login è impostato su true, le <div> blocco contenente v-if la direttiva verrà prodotta, così visualizzata.

v-se vs v-spettacolo

Vale la pena notare che il v-show funzionerebbe anche nell'esempio sopra e funzionerebbe in modo apparentemente identico, ma c'è una distinzione tra i due.

v-if rende condizionatamente un elemento, mentre v-show mostra/visualizza condizionatamente un elemento.

Ciò implica che quando il condizionale è attivato, v-if cancellerà e ripristinerà effettivamente i componenti v-show li rende semplicemente invisibili o visibili. La seguente animazione illustra come v-if elimina e riproduce effettivamente blocchi di codice:

Nel frattempo, v-show manterrà sempre l'elemento nel DOM e cambierà semplicemente il suo CSS per cambiarne l'aspetto (impostando il suo display a none):

v-altro

I v-else la direttiva è una v-if direttiva che consente di personalizzare il file false valore nei rendering condizionali. Se non lo è true, Puoi usare v-else per definire cosa dovrebbe invece accadere.

Ad esempio, supponiamo di avere una password immessa e vogliamo che produca un messaggio di errore, "Password Debole", se la lunghezza dell'input è inferiore a 6 o visualizza "Password sicura" se la lunghezza è maggiore di 6.

Questo è un rendering condizionale, con un'opzione per la gestione del caso falso:

<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>

Utilizziamo questo per alternare i contenuti di una semplice pagina di accesso in modo che cambi il messaggio in base al fatto che un utente sia connesso o meno. Modificheremo la formulazione del pulsante in base a userLoggedIn anche lo stato:

<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>

L'evento clic del pulsante attiverà il userLoggedIn elemento di dati, e ciò influirà sui dati visualizzati come mostrato di seguito:

v-altro-se

v-else-if extends a v-if con else...if bloccare. Questo è simile a JavaScript else...if blocco in quanto ci consente di aggiungere un'istruzione if a un esistente v-if. Viene utilizzato quando ci sono molti criteri da controllare e può essere concatenato più volte:

<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>

Conclusione

In questo articolo, abbiamo visto come eseguire il rendering condizionale di un elemento con v-if, v-elsee v-else-if. Abbiamo anche spiegato la differenza tra v-if ed v-show.

• Coinsmart. Il miglior scambio di bitcoin e criptovalute d'Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. ACCESSO LIBERO.
• Criptofalco. Radar Altcoin. Prova gratuita.
• Fonte: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/