VueJS - Renderização

Neste capítulo, aprenderemos sobre renderização condicional e renderização de lista. Na renderização condicional, discutiremos sobre o uso de if, if-else, if-else-if, show, etc. Na renderização de lista, discutiremos como usar o loop for.

Renderização Condicional

Vamos começar e trabalhar em um exemplo primeiro para explicar os detalhes da renderização condicional. Com a renderização condicional, queremos produzir apenas quando a condição for atendida e a verificação condicional for feita com a ajuda de if, if-else, if-else-if, show, etc.

v-if

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

No exemplo acima, criamos um botão e duas tags h1 com a mensagem.

Uma variável chamada show é declarada e inicializada com um valor true. Ele é exibido perto do botão. Com o clique do botão, estamos chamando um métodoshowdata, que alterna o valor da variável show. Isso significa que com o clique do botão, o valor da variável show mudará de verdadeiro para falso e de falso para verdadeiro.

Atribuímos if à tag h1, conforme mostrado no seguinte trecho de código.

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

Agora o que ele fará é verificar o valor da variável show e se for verdadeiro o tag h1 será mostrado. Clique no botão e visualize no navegador, já que o valor da variável show muda para falso, a tag h1 não é exibida no navegador. Ele é exibido apenas quando a variável show é verdadeira.

A seguir está a exibição no navegador.

Se verificarmos no navegador, é o que obtemos quando o show é falso.

A tag h1 é removida do DOM quando a variável show é definida como falsa.

Isso é o que vemos quando a variável é verdadeira. A tag h1 é adicionada de volta ao DOM quando a variável show é definida como true.

v-else

No exemplo a seguir, adicionamos v-else à segunda tag 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 é adicionado usando o seguinte trecho de código.

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

Agora, se show é verdade “This is h1 tag” será exibido e se for falso “This is h2 tag”será mostrado. Isso é o que obteremos no navegador.

A tela acima é quando a variável show é verdadeira. Visto que adicionamos v-else, a segunda instrução não está presente. Agora, quando clicarmos no botão, a variável show se tornará falsa e a segunda declaração será exibida conforme mostrado na imagem a seguir.

v-show

v-show se comporta da mesma forma que v-if. Ele também mostra e oculta os elementos com base na condição atribuída a ele. A diferença entre v-if e v-show é que v-if remove o elemento HTML do DOM se a condição for falsa e o adiciona de volta se a condição for verdadeira. Enquanto v-show oculta o elemento, se a condição for falsa com display: none. Ele mostra o elemento de volta, se a condição for verdadeira. Assim, o elemento está sempre presente no 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 é designado ao elemento HTML usando o seguinte fragmento de código.

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

Usamos a mesma variável show e com base no fato de ser verdadeiro / falso, a imagem é exibida no navegador.

Agora, como a variável show é verdadeira, a imagem é como exibida na captura de tela acima. Vamos clicar no botão e ver o display.

A variável show é falsa, portanto, a imagem está oculta. Se inspecionarmos e vermos o elemento, o div junto com a imagem ainda faz parte do DOM com a exibição da propriedade de estilo: nenhum como visto na captura de tela acima.

Renderização de lista

v-para

Vamos agora discutir a renderização de lista com a diretiva 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>

Uma variável chamada itens é declarada como uma matriz. Nos métodos, existe um método chamadoshowinputvalue, que é atribuído à caixa de entrada que leva os nomes das frutas. No método, as frutas inseridas na caixa de texto são adicionadas ao array usando o seguinte trecho de código.

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

Usamos v-for para exibir as frutas inseridas como no seguinte trecho de código. V-for ajuda a iterar os valores presentes na matriz.

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

Para iterar sobre o array com o loop for, temos que usar v-for = ”a em itens” onde a contém os valores no array e será exibido até que todos os itens sejam concluídos.

Output

A seguir está a saída no navegador.

Ao inspecionar os itens, é o que mostra no navegador. No DOM, não vemos nenhuma diretiva v-for para o elemento li. Ele exibe o DOM sem nenhuma diretiva VueJS.

Se quisermos mostrar o índice do array, isso é feito usando o seguinte 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 obter o índice, adicionamos mais uma variável no colchete, conforme mostrado no seguinte trecho de código.

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

Em (a, índice), a é o valor e indexÉ a chave. A exibição do navegador será agora como mostrado na imagem a seguir. Assim, com a ajuda do índice, quaisquer valores específicos podem ser exibidos.

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