Representación condicional de Vue v-if y v-show

v-if /v-else o v-show 

El valor del atributo es verdadero y falso, la variable utilizada es verdadera para mostrar y falsa para ocultar

<div id="app">
			<button @click="change1">开关</button>
			<div v-if="flag">我是v-if</div>
			<div v-show="flag">我是v-show</div>
	
		</div>

new Vue({
				el:"#app",
				data:{
					n2:true,
					flag:true
				},
				methods:{
					change1(){
						this.flag=!this.flag
					}
				}
			})

pantalla de interfaz

 Ambos desaparecen cuando se hace clic en el interruptor

diferencia entre los dos

Ejemplo del código de ahora:

 

 Desde el código original visto después de hacer clic en el botón, se puede ver que v-if anota directamente el elemento (elimina el nodo)

  v-show es para configurar la visualización del elemento: ninguno

// v-if tiene un alto consumo de conmutación y se usa a menudo en módulos que los usuarios no cambian a menudo
// v-show tiene un alto consumo de rendimiento y se usa a menudo en módulos que se cambian con frecuencia