Maison >interface Web >Voir.js >Comment utiliser v-if dans vue
Comment utiliser v-if dans vue
- WBOYoriginal
- 2022-03-17 11:08:3652439parcourir
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"".
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)
(1) v- if application
<div id="app">
<h2 v-if="true">{{message}}</h2>
</div>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>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: '#app',
data: {
isUser: true
}
})
</script>
</body>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 .jsCe 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!