Comment utiliser v-if dans vue-Voir.js-php.cn

Comment utiliser v-if dans vue

WBOY

Libérer： 2022-03-17 11:08:36

original

52366 Les gens l'ont consulté

Dans vue, "v-if" est utilisé pour faire fonctionner les éléments DOM en fonction de l'expression vraie ou fausse. Vous pouvez changer l'affichage et le masquage des éléments lorsque la valeur de l'expression est vraie, l'élément existe dans l'arborescence dom ; , et l'expression est Lorsque false, l'élément est supprimé de l'arborescence DOM et la syntaxe est "v-if="expression"".

Comment utiliser v-if dans vue

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Utilisation de v-if dans vue

v-if : Changer l'affichage et le masquage des éléments (éléments DOM opérationnels) selon l'expression vraie ou fausse (éléments DOM opérationnels)

Comment utiliser v-if dans vue

(1) v- if application

<div id="app">
 <h2 v-if="true">{{message}}</h2>
</div>

Copier après la connexion

Les données ne seront affichées que lorsqu'elles sont vraies

(2) v-if et v-else

<div id="app">
 <h2 v-if="false">{{message}}</h2>
  <h1 v-else>hello</h1>
</div>

Copier après la connexion

Si v-if est vrai, exécutez si, sinon, exécutez else

( 3) Cas : v -Application de if et v-else

<body>
<div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="用户账号">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱">
    </span>
   <button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: &#39;#app&#39;,
        data: {
            isUser: true
        }
    })
</script>
</body>

Copier après la connexion

Cliquez pour changer de type pour changer le contenu d'affichage. À ce moment, il y aura un problème de réutilisation des balises d'entrée (le contenu de la zone de saisie ne le fait pas). changer après le changement. Il s'agit d'un DOM virtuel, dans la mesure du possible. Réutiliser des éléments existants au lieu d'en créer de nouveaux peut améliorer les performances). Lorsque les clés sont les mêmes, le contenu sera conservé lorsqu'elles sont différentes. , le contenu ne sera pas conservé. [Recommandations associées : "

Tutoriel vue .js

》】

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!