VueJS - Representación

En este capítulo, aprenderemos sobre la representación condicional y la representación de listas. En el renderizado condicional, discutiremos sobre el uso de if, if-else, if-else-if, show, etc. En el renderizado de listas, discutiremos cómo usar for loop.

Representación condicional

Comencemos y trabajemos en un ejemplo primero para explicar los detalles de la representación condicional. Con la representación condicional, queremos generar resultados solo cuando se cumpla la condición y la verificación condicional se realiza con la ayuda de if, if-else, if-else-if, show, etc.

v-si

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

Output

En el ejemplo anterior, hemos creado un botón y dos etiquetas h1 con el mensaje.

Una variable llamada show se declara y se inicializa con un valor verdadero. Se muestra cerca del botón. Al hacer clic en el botón, llamamos a un métodoshowdata, que alterna el valor de la variable show. Esto significa que al hacer clic en el botón, el valor de la variable show cambiará de verdadero a falso y de falso a verdadero.

Hemos asignado if a la etiqueta h1 como se muestra en el siguiente fragmento de código.

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

Ahora lo que hará es comprobar el valor de la variable show y, si es cierto, se mostrará la etiqueta h1. Haga clic en el botón y vea en el navegador, ya que el valor de la variable show cambia a falso, la etiqueta h1 no se muestra en el navegador. Se muestra solo cuando la variable show es verdadera.

A continuación se muestra la visualización en el navegador.

Si comprobamos en el navegador, esto es lo que obtenemos cuando show es falso.

La etiqueta h1 se elimina del DOM cuando la variable show se establece en falso.

Esto es lo que vemos cuando la variable es verdadera. La etiqueta h1 se vuelve a agregar al DOM cuando la variable show se establece en true.

v-else

En el siguiente ejemplo, hemos agregado v-else a la segunda etiqueta h1.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-else se agrega mediante el siguiente fragmento de código.

<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>

Ahora, si el espectáculo es cierto “This is h1 tag” se mostrará, y si es falso “This is h2 tag”será mostrado. Esto es lo que obtendremos en el navegador.

La pantalla anterior es cuando la variable show es verdadera. Dado que hemos agregado v-else, la segunda declaración no está presente. Ahora, cuando hacemos clic en el botón, la variable show se volverá falsa y la segunda declaración se mostrará como se muestra en la siguiente captura de pantalla.

v-show

v-show se comporta igual que v-if. También muestra y oculta los elementos en función de la condición que se le asigna. La diferencia entre v-if y v-show es que v-if elimina el elemento HTML del DOM si la condición es falsa y lo agrega de nuevo si la condición es verdadera. Mientras que v-show oculta el elemento, si la condición es falsa con display: none. Muestra el elemento de nuevo, si la condición es verdadera. Así, el elemento está siempre presente en el dom.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
         <div v-show = "show">
            <b>V-Show:</b>
            <img src = "images/img.jpg" width = "100" height = "100" />
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-show se asigna al elemento HTML mediante el siguiente fragmento de código.

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

Hemos utilizado la misma variable show y, en función de que sea verdadero / falso, la imagen se muestra en el navegador.

Ahora, dado que la variable show es verdadera, la imagen es como se muestra en la captura de pantalla anterior. Hagamos clic en el botón y veamos la pantalla.

La variable show es falsa, por lo tanto, la imagen está oculta. Si inspeccionamos y vemos el elemento, el div junto con la imagen sigue siendo parte del DOM con la propiedad de estilo display: none como se ve en la captura de pantalla anterior.

Representación de listas

v-para

Analicemos ahora la representación de listas con la directiva v-for.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "a in items">{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

Una variable llamada elementos se declara como una matriz. En los métodos, hay un método llamadoshowinputvalue, que se asigna al cuadro de entrada que toma los nombres de las frutas. En el método, las frutas ingresadas dentro del cuadro de texto se agregan a la matriz usando el siguiente código.

showinputvalue : function(event) {
   this.items.push(event.target.value);
}

Hemos utilizado v-for para mostrar las frutas ingresadas como en el siguiente código. V-for ayuda a iterar sobre los valores presentes en la matriz.

<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>

Para iterar sobre la matriz con el bucle for, tenemos que usar v-for = ”a en elementos” donde a contiene los valores en la matriz y se mostrará hasta que todos los elementos estén listos.

Output

A continuación se muestra la salida en el navegador.

Al inspeccionar los elementos, esto es lo que muestra en el navegador. En el DOM, no vemos ninguna directiva v-for para el elemento li. Muestra el DOM sin directivas VueJS.

Si deseamos mostrar el índice del arreglo, lo hacemos usando el siguiente código.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "(a, index) in items">{{index}}--{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

Para obtener el índice, hemos agregado una variable más en el corchete como se muestra en el siguiente fragmento de código.

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

En (a, índice), a es el valor y indexes la llave. La pantalla del navegador ahora será como se muestra en la siguiente captura de pantalla. Por lo tanto, con la ayuda del índice se pueden mostrar los valores específicos.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved