Maison interface Web js tutoriel Explication détaillée de l'utilisation de la directive v-if dans les éléments et les modèles

Explication détaillée de l'utilisation de la directive v-if dans les éléments et les modèles

Jun 29, 2017 pm 03:48 PM
template v-if 指令

Cet article vous présente principalement les informations pertinentes sur l'utilisation des instructions v-if dans les éléments et les modèles dans les enregistrements d'apprentissage Vue.js. L'article donne des exemples de codes détaillés pour votre référence et votre apprentissage. utiliser pour vous. Pour une valeur d'apprentissage de référence, les amis qui en ont besoin peuvent jeter un œil ci-dessous.

Cet article vous présente principalement l'utilisation des instructions v-if dans les éléments et les modèles de Vue.js. Il est partagé pour votre référence et votre étude. Jetons un coup d'œil à l'introduction détaillée :

<.>

La syntaxe est relativement simple, il suffit de saisir le code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
 <script src="cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="wangtuizhijiademo">
 <p v-if="instruction">在Vue.js中,当判断语句为true,可以显示信息,当为false时候不显示</p>
 <template v-if="show1">
  <p>我是 show1,默认是开启的(true),当你设置false我不显示!</p>
 </template>
 <template v-if="show2">
  <p>我是 show2,默认是关闭的,当你设置show2的值为true,我会被显示!</p>
 </template>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijiademo&#39;,
  data: {
   instruction:true,
   show1: true,
   show2: false
  }
 })
</script>
</body>
</html>
Copier après la connexion
true signifie l'état allumé

, false signifie l'état éteint État.

Si vous êtes intéressé, vous pouvez essayer de changer show2: false de false à true. Vous pouvez voir deux messages, comme suit : .

Dans Vue.js, lorsque la déclaration de jugement est vraie, les informations peuvent être affichées. Lorsqu'elles sont fausses, elles ne seront pas affichées

Je suis show1, qui est activé par défaut (true). . Lorsque vous définissez false, je ne l'afficherai pas !

Je suis show2, qui est désactivé par défaut. Lorsque vous définissez la valeur de show2 sur true, je serai affiché !

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Comment obtenir des objets à l'aide de commandes dans Terraria ? -Comment collecter des objets dans Terraria ? Comment obtenir des objets à l'aide de commandes dans Terraria ? -Comment collecter des objets dans Terraria ? Mar 19, 2024 am 08:13 AM

Comment obtenir des objets à l'aide de commandes dans Terraria ? 1. Quelle est la commande pour donner des objets dans Terraria ? Dans le jeu Terraria, donner des commandes à des objets est une fonction très pratique. Grâce à cette commande, les joueurs peuvent obtenir directement les objets dont ils ont besoin sans avoir à combattre des monstres ou à se téléporter vers un certain endroit. Cela peut grandement faire gagner du temps, améliorer l’efficacité du jeu et permettre aux joueurs de se concentrer davantage sur l’exploration et la construction du monde. Dans l’ensemble, cette fonctionnalité rend l’expérience de jeu plus fluide et plus agréable. 2. Comment utiliser Terraria pour donner des commandes d'objets 1. Ouvrez le jeu et entrez dans l'interface du jeu. 2. Appuyez sur la touche "Entrée" du clavier pour ouvrir la fenêtre de discussion. 3. Entrez le format de commande dans la fenêtre de discussion : "/give[player name][item ID][itemQuantity]".

Démarrage rapide de VUE3 : utiliser les instructions de Vue.js pour changer d'onglet Démarrage rapide de VUE3 : utiliser les instructions de Vue.js pour changer d'onglet Jun 15, 2023 pm 11:45 PM

Cet article vise à aider les débutants à démarrer rapidement avec Vue.js3 et à obtenir un simple effet de changement d'onglet. Vue.js est un framework JavaScript populaire qui peut être utilisé pour créer des composants réutilisables, gérer facilement l'état de votre application et gérer les interactions de l'interface utilisateur. Vue.js3 est la dernière version du framework Par rapport aux versions précédentes, il a subi des changements majeurs, mais les principes de base n'ont pas changé. Dans cet article, nous utiliserons les instructions de Vue.js pour implémenter l'effet de changement d'onglet, dans le but de familiariser les lecteurs avec Vue.js.

Erreur Vue : La directive v-if ne peut pas être utilisée correctement pour le rendu conditionnel. Comment le résoudre ? Erreur Vue : La directive v-if ne peut pas être utilisée correctement pour le rendu conditionnel. Comment le résoudre ? Aug 19, 2023 pm 01:09 PM

Erreur Vue : La directive v-if ne peut pas être utilisée correctement pour le rendu conditionnel. Comment le résoudre ? Dans le développement de Vue, la directive v-if est souvent utilisée pour afficher un contenu spécifique dans la page en fonction de conditions. Cependant, nous pouvons parfois rencontrer un problème lorsque nous utilisons correctement l'instruction v-if, nous ne pouvons pas obtenir les résultats attendus et recevons un message d'erreur. Cet article décrit une solution à ce problème et fournit un exemple de code pour faciliter la compréhension. 1. Description du problème Habituellement, nous utilisons la directive v-if dans le modèle Vue pour déterminer si

Fonction v-if dans Vue3 : contrôler dynamiquement le rendu des composants Fonction v-if dans Vue3 : contrôler dynamiquement le rendu des composants Jun 19, 2023 am 08:31 AM

Fonction v-if dans Vue3 : contrôle dynamique du rendu des composants Vue3 est l'un des frameworks les plus couramment utilisés dans le développement front-end. Il possède des fonctionnalités telles que la communication des composants parent-enfant, la liaison de données bidirectionnelle et les mises à jour réactives. largement utilisé dans le développement front-end. Cet article se concentrera sur la fonction v-if dans Vue3 et explorera comment elle contrôle dynamiquement le rendu des composants. v-if est une directive dans Vue3 utilisée pour contrôler si un composant ou un élément est rendu dans la vue. Lorsque la valeur de v-if est vraie, le composant ou l'élément sera rendu dans la vue et quand v ;

Lequel a la priorité la plus élevée, v-if ou v-for en vue ? Lequel a la priorité la plus élevée, v-if ou v-for en vue ? Jul 20, 2022 pm 06:02 PM

Dans vue2, v-for a une priorité plus élevée que v-if ; dans vue3, v-if a une priorité plus élevée que v-for. Dans Vue, n'utilisez jamais v-if et v-for sur le même élément en même temps, ce qui entraînerait un gaspillage de performances (chaque rendu bouclera d'abord puis effectuera un jugement conditionnel si vous souhaitez éviter cette situation, Modèles) ; peut être imbriqué dans la couche externe (le rendu de la page ne génère pas de nœuds DOM), le jugement v-if est effectué sur cette couche, puis la boucle v-for est effectuée en interne.

Visualisation des données via le package Template de Golang Visualisation des données via le package Template de Golang Jul 17, 2023 am 09:01 AM

Visualisation des données via le package Template de Golang Avec l'avènement de l'ère du Big Data, la visualisation des données est devenue l'un des moyens importants de traitement et d'analyse de l'information. La visualisation des données peut présenter les données de manière concise et intuitive, aidant ainsi les utilisateurs à mieux comprendre et analyser les données. Dans Golang, nous pouvons utiliser le package Template pour implémenter des fonctions de visualisation de données. Cet article expliquera comment utiliser le package Template de Golang pour réaliser la visualisation des données et fournira des exemples de code. GolangTem

Comment utiliser v-show et v-if dans Vue pour obtenir un rendu de page dynamique Comment utiliser v-show et v-if dans Vue pour obtenir un rendu de page dynamique Jun 11, 2023 pm 11:27 PM

Vue est un framework JavaScript populaire pour créer des applications Web dynamiques. v-show et v-if sont tous deux des instructions dans Vue pour le rendu dynamique des vues. Ils peuvent nous aider à mieux contrôler la page lorsque les éléments DOM ne sont pas affichés ou masqués. Cet article expliquera en détail comment utiliser les instructions v-show et v-if dans Vue pour obtenir un rendu de page dynamique. Instruction v-show dans Vue v-show est une instruction dans Vue qui s'affiche dynamiquement en fonction de la valeur d'une expression

Explication détaillée de la fonction v-if dans Vue3 : application du rendu des composants à contrôle dynamique Explication détaillée de la fonction v-if dans Vue3 : application du rendu des composants à contrôle dynamique Jun 18, 2023 pm 02:21 PM

Explication détaillée de la fonction v-if dans Vue3 : Application du contrôle dynamique du rendu des composants Vue3 est un framework frontal populaire, et l'instruction v-if est l'un des moyens couramment utilisés pour contrôler dynamiquement le rendu des composants. Dans Vue3, l'application de la fonction v-if a un large éventail d'utilisations. Pour les développeurs front-end, il est très important de maîtriser l'utilisation de la fonction v-if. Qu'est-ce que la fonction v-if ? v-if est l'une des directives de Vue3, qui peut contrôler dynamiquement le rendu des composants en fonction des conditions. v-if restitue le groupe lorsque la condition est vraie

See all articles