Cómo determinar cómo se muestra un elemento usando la directiva interna v-if en la biblioteca Vue.js

La biblioteca Vue.js viene con algunas instrucciones internas, como v-if, v-show, v-else, v-on, etc. Entre ellos, v-if determina si el elemento se genera o elimina en función del valor de la expresión. Si el juicio es verdadero, el elemento se genera; de lo contrario, el elemento se elimina. A continuación se muestra un ejemplo del uso de v-if de la siguiente manera:

Herramientas/Materiales

Vue.js

HBuilder

Herramientas de captura de pantalla

Navegador

Método/Pasos

El primer paso es crear una página estática, vif.html. Para expresar la instancia de instrucción v-if, por favor. Agregue el contenido del título de la siguiente manera:

Paso 2, introduzca el archivo js principal de Vue.js

lt script src="./js/vue.min.js"gt ;lt; ;/scriptgt;

Como se muestra a continuación:

Paso 3, inserte div y p en el elemento del cuerpo, asigne un valor de identificación al div y agregue v en el elemento p. si su valor es un valor booleano y el contenido interno es "Bienvenido a Vue.js", como se muestra a continuación:

Paso 4, escriba Vue.js en el código

Paso 5, establezca el valor booleano en data Establezca el valor booleano en los datos en falso, complete la configuración y verifique el efecto, como se muestra en la siguiente figura:

Paso 6, obtenga una vista previa de la página nuevamente y busque "Bienvenido a Vue.js". no se muestra, como se muestra en la siguiente figura Pantalla:

Paso 7, agregue v-if en el elemento p y establezca el valor booleano. El contenido interno es "Bienvenido a Vue.js".