La diferencia entre v-if y v-show
¿Qué es?
Tanto v-if como v-show pueden pasar condiciones para determinar si mostrar o no. El uso es el siguiente:
<template>
<div class="about">
<button v-if="1 == 2">按钮1</button>
<button v-show="1 == 2">按钮2</button>
<button>按钮3</button>
</div>
</template>
Se puede ver desde la consola que el botón 1 usa v-if, y el contenido del código de este botón no se puede ver y no se puede mostrar en el navegador. El botón 2 usa v-show, puede ver el contenido del código de este botón, pero un css de visualización: no se agrega ninguno al estilo.
¿Dónde está la diferencia?
diferente modo
v-if: manipular el DOM
v-show: estilo 操作 (pantalla)
La compilación es diferente
v-if: El proceso de compilación y descarga de DOM, es perezoso e inicia la compilación parcial cuando la condición es verdadera
v-show: basado en css
rendimiento diferente
v-if: alto consumo (porque dom debe ser manipulado)
v-show: bajo consumo, adecuado para cambios frecuentes
Diferentes escenarios de uso
v-if: adecuado para escenarios con negocios relativamente complejos
v-show: adecuado para escenarios de conmutación frecuentes
Lo anterior es la diferencia entre v-if y v-show en el proyecto vue .
Compartiré los problemas comunes en mis proyectos habituales y el conocimiento de la prueba escrita y la entrevista contigo en CSDN, y progresaremos juntos.