Maison > Article > interface Web > Compréhension simple du rendu conditionnel Vue_vue.js

Compréhension simple du rendu conditionnel Vue_vue.js

不言original: 2018-03-31 17:04:391110parcourir

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é à d477f9ce7bf77f53fbcf36bec1b69b7a

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!

css if JS github https

Déclaration：

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

Article précédent：Comment utiliser le tableau js pour supprimer les doublonsArticle suivant：Comment utiliser le tableau js pour supprimer les doublons

Articles Liés

Voir plus