Explication détaillée du rendu conditionnel Vue.js
Mar 31, 2018 pm 05:00 PMCet article partage principalement avec vous l'explication détaillée du rendu conditionnel de Vue.js. Dans les modèles de cha?nes, tels que Handles, nous devons écrire un bloc conditionnel comme celui-ci?:
<!-- Handlebars 模板 -->{{#if ok}} <h1>Yes</h1>{{/if}}
Dans Vue, nous utilisons la directive v-if
pour réaliser la même fonction?:
<h1 v-if="ok">Yes</h1>
Vous pouvez également utiliser v-else
pour ajouter un "bloc else"?:
<h1 v-if="ok">Yes</h1>No
# Utiliser le regroupement de rendu conditionnel <template>
sur les éléments v-if
Parce que v-if
est une directive, elle doit être ajoutée à un élément. Mais que se passe-t-il si vous souhaitez changer plusieurs éléments?? à ce stade, vous pouvez traiter un <template>
élément comme un élément d'emballage invisible et utiliser v-if
dessus. Le résultat final du rendu sera sans <template>
éléments.
<p id="example"> <template v-if='ok'> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template></p>
var vm = new Vue({ el: '#example', data: { ok: true } })
# v-else
et v-else-if
peuvent être représentés par la directive v-else
pour représenter le "bloc else" de v-if
?: < L'élément ??>
<p v-if="Math.random() > 0.5"> Now you see me</p> <p v-else> Now you don't </p>
<p v-if="type === 'A'"> A </p> <p v-else-if="type === 'B'"> B </p> <p v-else-if="type === 'C'"> C </p> <p v-else> Not A/B/C </p>
doit immédiatement suivre l'élément avec v-else
ou v-if
, sinon il ne sera pas reconnu. v-else-if
, v-else
doit également suivre un élément avec v-else-if
ou v-if
. v-else-if
. v-show
<h1 v-show="ok">Hello!</h1>La différence est que les éléments avec
seront toujours rendus et resteront dans le DOM. v-show
Basculez simplement l’affichage des propriétés CSS de l’élément. v-show
Notez que ne prend pas en charge l'élément v-show
, ni ne prend en charge <template>
. v-else
est un "vrai" rendu conditionnel car il garantit que les écouteurs d'événements et les sous-composants à l'intérieur du bloc conditionnel pendant le changement sont détruits et reconstruits de manière appropriée. v-if
est également paresseux?: si la condition est fausse lors du rendu initial, rien n'est fait - le bloc conditionnel ne sera rendu qu'à la première fois que la condition devient vraie. v-if
est beaucoup plus simple?: l'élément est toujours rendu quelles que soient les conditions initiales et est simplement basculé en fonction du CSS. v-show
a une surcharge de commutation plus élevée, tandis que v-if
a une surcharge de rendu initiale plus élevée. Par conséquent, il est préférable d'utiliser v-show
si vous devez changer très fréquemment?; si les conditions changent rarement au moment de l'exécution, il est préférable d'utiliser v-show
. v-if
<!-- Handlebars 模板 -->{{#if ok}} <h1>Yes</h1>{{/if}}Dans Vue, nous utilisons
La directive réalise la même fonction?: v-if
<h1 v-if="ok">Yes</h1>Vous pouvez également utiliser
pour ajouter un "bloc else"?: v-else
<h1 v-if="ok">Yes</h1>No
# Utilisez < sur le element ??> Regroupement de rendu conditionnel <template>
v-if
Parce que
élément v-if
comme un élément d'emballage invisible <template>
et utiliser dessus. Le résultat final du rendu sera sans v-if
éléments. <template>
<p id="example"> <template v-if='ok'> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template></p>
var vm = new Vue({ el: '#example', data: { ok: true } })#
et v-else
v-else-if
peuvent être représentés par la directive
?: < L'élément ??>v-else
v-if
<p v-if="Math.random() > 0.5"> Now you see me</p> <p v-else> Now you don't </p>doit immédiatement suivre un élément avec
<p v-if="type === 'A'"> A </p> <p v-else-if="type === 'B'"> B </p> <p v-else-if="type === 'C'"> C </p> <p v-else> Not A/B/C </p>ou
, sinon il ne sera pas reconnu. v-else
v-if
Semblable à v-else-if
,
ou v-else
. v-else-if
v-if
v-showv-else-if
.
v-show
La différence est que les éléments avec
<h1 v-show="ok">Hello!</h1>Basculez simplement l’affichage des propriétés CSS de l’élément.
v-show
v-show
Notez que
, ni ne prend en charge . v-show
<template>
v-else
v-if vs v-show
est un "vrai" rendu conditionnel car il garantit que les écouteurs d'événements et les sous-composants à l'intérieur du bloc conditionnel pendant le changement sont détruits et reconstruits de manière appropriée.
v-if
est également paresseux?: si la condition est fausse lors du rendu initial, rien n'est fait - le bloc conditionnel ne sera rendu qu'à la première fois que la condition devient vraie.
En revanche, v-if
est beaucoup plus simple?: l'élément est toujours rendu quelles que soient les conditions initiales et est simplement basculé en fonction du CSS.
En général, v-if
a une surcharge de commutation plus élevée, tandis que v-show
a une surcharge de rendu initiale plus élevée. Par conséquent, il est préférable d'utiliser v-show
si vous devez changer très fréquemment?; si les conditions changent rarement au moment de l'exécution, il est préférable d'utiliser v-if
.
Recommandations associées?:
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Le système d'exploitation Windows est l'un des systèmes d'exploitation les plus populaires au monde et sa nouvelle version Win11 a beaucoup attiré l'attention. Dans le système Win11, l'obtention des droits d'administrateur est une opération importante. Les droits d'administrateur permettent aux utilisateurs d'effectuer davantage d'opérations et de paramètres sur le système. Cet article présentera en détail comment obtenir les autorisations d'administrateur dans le système Win11 et comment gérer efficacement les autorisations. Dans le système Win11, les droits d'administrateur sont divisés en deux types : administrateur local et administrateur de domaine. Un administrateur local dispose de tous les droits d'administration sur l'ordinateur local

Explication détaillée de l'opération de division dans OracleSQL Dans OracleSQL, l'opération de division est une opération mathématique courante et importante, utilisée pour calculer le résultat de la division de deux nombres. La division est souvent utilisée dans les requêtes de bases de données. Comprendre le fonctionnement de la division et son utilisation dans OracleSQL est donc l'une des compétences essentielles des développeurs de bases de données. Cet article discutera en détail des connaissances pertinentes sur les opérations de division dans OracleSQL et fournira des exemples de code spécifiques pour référence aux lecteurs. 1. Opération de division dans OracleSQL

L'opérateur modulo (%) en PHP est utilisé pour obtenir le reste de la division de deux nombres. Dans cet article, nous discuterons en détail du r?le et de l'utilisation de l'opérateur modulo et fournirons des exemples de code spécifiques pour aider les lecteurs à mieux comprendre. 1. Le r?le de l'opérateur modulo En mathématiques, lorsqu'on divise un entier par un autre entier, on obtient un quotient et un reste. Par exemple, lorsque l’on divise 10 par 3, le quotient est 3 et le reste est 1. L'opérateur modulo est utilisé pour obtenir ce reste. 2. Utilisation de l'opérateur modulo En PHP, utilisez le symbole % pour représenter le module

Vue.js convient aux projets de petite et moyenne taille et aux itérations rapides, tandis que React convient aux applications grandes et complexes. 1) Vue.js est facile à utiliser et convient aux situations où l'équipe est insuffisante ou l'échelle du projet est petite. 2) React a un écosystème plus riche et convient aux projets avec des performances élevées et des besoins fonctionnels complexes.

Explication détaillée de la fonction d'appel système Linux system() L'appel système est une partie très importante du système d'exploitation Linux. Il fournit un moyen d'interagir avec le noyau système. Parmi elles, la fonction system() est l’une des fonctions d’appel système couramment utilisées. Cet article présentera en détail l’utilisation de la fonction system() et fournira des exemples de code correspondants. Concepts de base des appels système Les appels système sont un moyen permettant aux programmes utilisateur d'interagir avec le noyau du système d'exploitation. Les programmes utilisateur demandent au système d'exploitation en appelant des fonctions d'appel système

Explication détaillée de la commande curl de Linux Résumé : curl est un puissant outil de ligne de commande utilisé pour la communication de données avec le serveur. Cet article présentera l'utilisation de base de la commande curl et fournira des exemples de code réels pour aider les lecteurs à mieux comprendre et appliquer la commande. 1. Qu’est-ce que la boucle ? curl est un outil de ligne de commande utilisé pour envoyer et recevoir diverses requêtes réseau. Il prend en charge plusieurs protocoles, tels que HTTP, FTP, TELNET, etc., et fournit des fonctions riches, telles que le téléchargement de fichiers, le téléchargement de fichiers, la transmission de données, le proxy.

Vue.js n'est pas difficile à apprendre, en particulier pour les développeurs avec une fondation JavaScript. 1) Sa conception progressive et son système réactif simplifient le processus de développement. 2) Le développement basé sur les composants rend la gestion du code plus efficace. 3) Les exemples d'utilisation montrent une utilisation de base et avancée. 4) Les erreurs courantes peuvent être déboguées via Vuedevtools. 5) L'optimisation des performances et les meilleures pratiques, telles que l'utilisation des attributs V-IF / V et clés, peuvent améliorer l'efficacité de l'application.

Vue.js est principalement utilisé pour le développement frontal. 1) Il s'agit d'un cadre JavaScript léger et flexible axé sur la construction d'interfaces utilisateur et d'applications à une seule page. 2) Le c?ur de Vue.js est son système de données réactif, et la vue est automatiquement mise à jour lorsque les données changent. 3) Il prend en charge le développement des composants et l'interface utilisateur peut être divisée en composants indépendants et réutilisables.
