Maison > Article > interface Web > Quelle est la différence entre v-show et v-if dans vuejs
Différences : 1. "v-if" ajoute ou supprime dynamiquement des éléments DOM dans l'arborescence DOM, "v-show" contrôle la visibilité en définissant l'attribut de style d'affichage des éléments DOM 2. Le processus de compilation est différent ; les conditions de compilation sont différentes ;4. Le coût de commutation de « v-if » est élevé, le coût de rendu initial de « v-show » est élevé, etc.
L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.
La directive v-if
et la directive v-show
peuvent contrôler dynamiquement le DOM
basé sur la valeur L'élément code> est affiché et masqué v-if
et v-show
sont des instructions internes couramment utilisées de Vue
. de l'instruction est d'agir comme une expression. Appliquer un comportement spécial à DOM
lorsque la valeur change. v-if
指令与v-show
指令都可以根据值动态控制DOM
元素显示隐藏,v-if
和v-show
属于Vue
的内部常用的指令,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM
上。
描述
v-if
v-if
指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truthy
值的时候被渲染。
<div v-if="show">show</div> <div v-else>hide</div>
v-show
v-show
指令用法大致一样,不同的是带有v-show
指令的元素始终会被渲染并保留在DOM
中,v-show
只是简单地切换元素的CSS property display
。
<div v-show="show">show</div>
区别
实现方式: v-if
是动态的向DOM
树内添加或者删除DOM
元素,v-show
是通过设置DOM
元素的display
样式属性控制显隐。
编译过程: v-if
切换有一个局部编译卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件,v-show
只是简单的基于CSS
切换。
编译条件: v-if
是惰性的,如果初始条件为假,则什么也不做,只有在条件第一次变为真时才开始局部编译, v-show
是在任何条件下都被编译,然后被缓存,而且DOM
元素保留。
性能消耗: v-if
有更高的切换消耗,v-show
有更高的初始渲染消耗。
使用场景: v-if
适合条件不太可能改变的情况,v-show
v-if
est utilisée pour restituer conditionnellement un morceau de content , ce contenu ne sera rendu que lorsque l'expression de la directive renvoie une valeur véridique
. 🎜rrreee🎜🎜v-show🎜🎜🎜 L'utilisation de la directive v-show
est à peu près la même, la différence est que les éléments avec la directive v-show
seront toujours être rendu et conservé dans Dans DOM
, v-show
change simplement l'affichage des propriétés CSS
de l'élément. 🎜rrreee🎜🎜Différence🎜🎜v - if
ajoute ou supprime dynamiquement des éléments DOM
dans l'arborescence DOM
, et v-show
définit DOM Le <code> L'attribut de style display
de l'élément contrôle la visibilité. 🎜🎜v-if
a un processus de compilation et de désinstallation partiel. Pendant le processus de commutation, les écouteurs d'événements internes et les sous-composants sont correctement détruits et reconstruits, v. -show n'est qu'un simple commutateur basé sur <code>CSS
. 🎜🎜v-if
est paresseux, si la condition initiale est fausse, ne faites rien et ne démarrez la compilation partielle que lorsque la condition devient vraie pour la première fois, v-show
est compilé dans toutes les conditions puis mis en cache, et l'élément DOM
est préservé. 🎜🎜v-if
a un coût de commutation plus élevé, et v-show
a un coût de rendu initial plus élevé. 🎜🎜v-if
convient aux situations où les conditions sont peu susceptibles de changer, et v-show
convient aux situations où les conditions changent fréquemment . 🎜🎜🎜🎜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!