Cet article aide principalement tout le monde à comprendre simplement le rendu conditionnel Vue. Qu'est-ce que le rendu conditionnel Vue, il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
1. v-if Afficher un seul. element
Notez que else ne peut suivre que v-if ou v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue条件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p class="test">
<p v-if="isDisplay"> <!--if...else... 单个元素-->
显示我1
</p>
<p v-else>
显示我2
</p>
</p>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html>Le résultat de sortie est : montre-moi 1
2. v-if affiche plusieurs éléments et doit être associé à
Notez que sinon uniquement Peut être suivi de v-if ou v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue条件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p class="test">
<template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
<p>显示我1</p>
<p>显示我11</p>
<p>显示我12</p>
<p>显示我13</p>
</template>
<p v-else>
显示我2
</p>
</p>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html>Résultat de sortie : montre-moi 1 montre-moi 11 montre-moi 12 montre-moi 13
3. v-show ne prend en charge que l'affichage d'un seul élément et ne prend pas en charge plusieurs éléments contenus dans
Notez que else ne peut être suivi que par v-if ou v -show après
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue条件渲染</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p class="test">
<p v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
显示我1
</p>
<p v-else>
显示我2
</p>
</p>
<script type="text/javascript">
var myVue =new Vue({
el: ".test",
data: {
isDisplay: 1
}
})
</script>
</body>
</html> 4. La différence entre v-if et v-show
(1) v-if est un rendu et un déchargement réels, mais après le premier rendu, le résultat sera mis en cache
(2) L'élément v-show est toujours compilé et conservé, mais est simplement basé sur le changement CSS
(3) Résumé : si vous devez changer fréquemment de v-show, c'est mieux s'il est peu probable que les conditions changent pendant l'exécution, v-if est meilleur
.Adresse gitHub : https://github .com/lily1010/vue_learn/tree/master/lesson08
Recommandations associées :
Compréhension facile du rendu conditionnel Vue
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
