e Fala jovem chegou mas isso aqui chegou a hora de a gente podar de verdade Nesta aula a gente vai abordagem declarações condicionais vamos nessa cara essa aqui é bem bacana E muito simples primeiro a gente tem que entender o conserto de diretiva né para depois a gente mergulhar nessas condições e outras que vão ver pela frente né é Lucas e eu fico cara o que são diretivas diretivas são instruções que o vídeo e é se dá para o elemento HTML é o componente certo por exemplo elemento HTML aqui normal ta certo tem um atributo
áudio que na verdade está dando instrução ao ao elemento MG acerto out de texto alternativo e Sr Sérgio Fontes são algumas instruções o grande e esse traz para gente umas instruções mais modernas né instruções mais digamos programáticas e todas elas começam com v Traz né de verde de queima jovem de vir hoje é esse of course bom então isso aqui que a gente chama de diretivas porque diretivas você tá dando instruções ao elemento HTML para resolver algum tipo de problema tá certo então tudo que você vê novo DS5 ver traz a gente chama de diretivas
beleza e essa diretiva que a gente vai ver hoje é chamada de ver show vivi3 vs if e PS2 diretivas para as declarações condicionais Beleza e como é que usa a diretiva cara não aumente a diretiva como eu falei Começa com v traço e o nome da direitinho parece casa fechou E aí igual o valor dela e pode ser qualquer condição e aqui dentro como a gente está trabalhando com diretivas condicionais você vai colocar uma condição aqui dentro Se isso for igual aquilo né só as condições normais de programação e se um foi igual a
um vai ser verdadeiro ou falso hora se for verdadeiro o ver show vai ser o que o nome show já te disse né vai mostrar se for falso né ele não vai mostrar é uma basicamente isso o veículo é a mesma coisa é uma declaração se for verdadeiro ele vai mostrar se for falso ele não vai mostrar e aí a gente consegue alinhar Nossa declaração com if né se isso daqui for falso v-else-if pode ser verdadeiro pode ser falso e se nesse caso for falso aí ele vai cair para o ver Elsa então é uma
cascata ele checa o primeiro se não for verdadeiro baixa é kal-el se e se não for verdadeiro vai chegar Wells isso daqui o verdadeiro eu já vai parar por aqui vai viver hora Thiago você disse que fechou é para exibir e o ver isso também é para exibir E aí qual a diferença a meu jovem bora bora para frente que agora ficou legal a parada olha só É nesse componente eu quero mostrar e esconder o header como eu falei as diretivas a gente pode utilizar no elemento e também os componentes Então vamos lá utilizar aqui
no componente ver show né fechou E aí Vou colocar aqui show renda o nome de uma variável aí agora cara a gente passa por um outro conceito que é declarar né atributos ou variáveis né E não importa aqui A nomenclatura eu gosto de chamar variados para ficar mais fácil então essa show reta aonde que eu declaro no componente é um lembre-se que a gente tinha dito que esse objeto aqui é o objeto onde contém os atributos do componente hora então aqui dentro que a gente vai declarar e aqui dentro tem um outro Campo especial chamado
data que é uma função Tá certo e essa função puramente vai retornar um objeto e tudo que eu declaramento desse objeto é o que a gente chama de objeto real e as variáveis relativas Então vou colocar aqui ó Show renda e aqui vai possui o valor inicialmente aos se eu salvar aqui esse reta já vai embora daqui tá certo Olha só salvei ele já foi embora Beleza a gente vai ver isso com calma calma calma calma certo o que ainda estou aqui no data Então galera esse data é a nossa central de digamos variáveis do
componente tudo que eu declaro aqui fica disponível para ser utilizado em um componente posso declarar contas variáveis eu quiser tá certo mas na verdade cara esse daqui é um objeto se você tá percebendo essa que o objeto esse aqui é um campo né o objeto um atributo do objeto e o valor objeto então aqui poderia ser user pode ser outro objeto aqui pode ser cola sei lá pode ser mais trendy ou pode ter mensagem pode ser o texto ninguém fim só que o objeto E aí vai depender do que você esteja construindo a em casa
a gente tá colocando né para mostrar esconder o nosso cabeçalho reza então coloquei aqui show reza beleza e agora vou trocar proverif ah e também ele não está lá agora vou colocar tu eu estou ele vai aparecer é isso agora coloquei show E aí beleza apareceu E aí Tiago qual é a diferença ainda não viu a diferença cara tô brincando com você Olha só a diferença essa daqui ó cara quando a gente coloca o fechou olha só aqui no código se você observar ele tá aqui tá certo correta Lembrando que esse Red é um componente
que vem ou daqui do de renda né e eu dei ela possui esse esse elemento HTML header com a classe reta lembre-se disso então esse elemento aqui vai ser aplicado no lugar do componente que você está sendo é que você está utilizando então teria ter seria basicamente isso daqui no final das contas Tá certo acho que você entendeu então cara tá aqui o elemento reta com a classe né e o texto radar que a gente criou o ver show tá verdadeiro Beleza agora vou colocar falsa olha só que acontece o verde essa quando a gente
utiliza fechou ele coloca a propriedade do estilo de esplenom ou seja o elemento ese o hino do tá aqui ó é mentira porém ele está a Hillary ele está escondido através do display nome apenas uma classe CSS é feito Agora se a gente troca para ver isso aí vem a diferença jovem Cadê o elemento o elemento não está no Dom massa E aí Tiago quando eu uso um quando eu uso o outro hora então Gerais eles eles dois têm a mesma finalidade mostrar a esconder Mas de repente você tem aqui um esquema de tev né
Sabe aquelas tá belezinha o pa Vou colocar aqui deve ser mesmo você tem deve um dois três quatro né o menor de tag E aí você tem um container aqui embaixo para mostrar o conteúdo ou ser qualquer outro clicando até vi um mostra o conteúdo um clique na tag 2 e mostra o conteúdo dois o futuro a gente pode até criar um concorrente assim para a gente aprender e assim sucessivamente Então esse elemento aqui sempre vai existir então a interessante você colocar deixou para só mostrar esconder mostrar esconder certo o veículo é mais quando você
quer remover o componente da página e não quer deixar disponível nem no código Tá certo Lembrando que com veículo ou vcs tem mais digamos tem que descarregar mais memória mais força mais energia dele para poder tirar e colocar elemento no dom ou seja o processo dele é muito maior o vejam não ele já está lá no Dom a parada já está lá só que ele vai lá só esconde e mostra com CSS O que é muito mais rápido e não consegue consumir tanto processamento então lembre-se que vem esse daí vai ser sempre mais é mais
pesado é digamos assim plug o dias Beleza então vamos aqui há mais exemplos mas exemplos aqui foi do renda certa eu vou deixar aqui ver bem isso que é de componentes e de componente normalmente a gente quer utilizar ele certo aí aqui eu vou colocar Olá tudo né a beleza aí aqui a gente quer colocar um é uma sessão de usuário nome do usuário eu vou colocar aqui nome tá certo e vou passar uma variável chamado nome aí a gente já entra em outro assunto cara variável name na verdade no inglês E aí a gente
aí entra no outro assunto que você com certeza já viu anteriormente eu falando que tinha dessa interpolação Você viu que a gente declarou-se a variável aqui lembra eu vou colocar Jon Snow Tá certo vou salvar ela vai aparecer aqui ele ensinou é para gente utilizar essa variável no template a gente tem que dizer o meu DS que isso daquela variável Ora se eu não colocar essa interpolação ele vai dizer que isso aqui é uma palavra normal né mas não é uma gente quer que o vídeo essa identifique isso daqui é uma variável que vem lá
do data do componente a gente tem que utilizar a interpolação E são essas duplas Chaves até abre e fecha isso é bem comum né em prêmios reativos como viés então todo e qualquer elemento que a gente declarem no data se a gente quiser utilizar aqui no template a gente tem que utilizar a interpolação e são as duas é feito e aqui nome né E vou colocar aqui sobrenome sobrenome e aqui Lost nem Então vamos colocar aqui mais fácil first Man e elastina gostei' e lazer o nascer o parque e aqui vai ser John já que
vai ser isso não tal ver apareceu aqui ó lá semente água Agora sim deu ensinou deixa eu dar um Dr aqui para separar eu vou até aqui para ficar fácil então beleza quer que eu vou mostrar aqui eu vou criar outra variável dizer assim ó Show first Name E aí vai ser falso E aí Vou colocar aqui show #show na verdade como da ver show o show name Thaís por exemplo YouTube do nome show né pro seu nome aí vai sumir obviamente porém como eu utilizei um ver show lá galera ele vai estar aqui no
ônibus tá ver aqui o display nome aí a gente pode depois no futuro criar um botão para alterar esse estado aqui e ele vai mostrar esconder mostrar esconder perfeito Então esse aqui é o o exemplo do fechou agora vamos para o exemplo do veículo elsie e fiel que a última exemplo da a gente dessa hora e o que eu vou criar aqui vai ser o que vou colocar aqui nível de acesso ou supor que eu tenho um livro chamado admin E aí eu tenho um livro chamado USA um nadica os ruivos chamado Martin Oi e
o usuário cumpridas tão cara acesso ao sistema bolso pow se ele for de mim e vai receber Olá de mim se ele for do Max ele vai dizer sim eu lá Market você ainda apartamento marketing certo e se ele for um usuário comum do sistema né ele faz exibir a mensagem aqui usuário então eu vou colocar aqui uma nova variável Axis levam ó e vou dizer assim ó Cadinho isso aqui foi proposital para a gente fazer a declaração agora aqui na unha eu vou dizer assim ó vê isso tá certo esse access level foi igual
a de mim agora tá vendo a declaração como qualquer linguagem de programação aqui Vocês levam igual a de um aqui também poderia ser dois igual apenas certo mais interessante sempre três iguais para você comparar também o tipo táxis leva igual de mim E aí bate em mim aí v-else-if se não se access levam e foi igual a marketing marketing e o inverso se ele não for nada disso daqui de isso aqui ele vai cair usuário Então vamos lá ver salvar o Pacaembu e admin porque o melhor que você leva de mim se eu colocar aqui
marketing ele vai alterar para onde marketing aqui ó deixa eu coloco aqui ó para não confundir você só usuário o usuário admin para não confundir o market da variável com o Max daqui do texto eu uso aí o market Oi e o usuário normal aí eu acho que fica mais fica mais claro para você o usuário marketing Tá certo então vamos supor que isso aqui é vazio aí vai ser o usuário normal não o cara alugou agora ele admin admin em E agora me diga Tiago por quê que a gente não colocou o ver show
aqui essa pergunta que você tá na cabeça primeiro conversou não dá para gente fazer ver show fechou e ver Elsa show é existe essa diretiva já tá aqui reclamando primeiro segundo o que se a gente coloca fechou aqui e é usuária de mim aí o cara vem aqui no código poderia especional código E aí ele iria ver os outros e 10 aqui porque você sabe que eu ver show apenas coloca display nome Dalila colocar já tá escondida aqui o usuário Max usuário normal né O que não é interessante Por isso que eu digo algumas vezes
a gente tem que utilizar o velho e outras a gente pode utilizar o deixou basicamente disso galera tão essa declaração aqui super simples Na verdade eu nem precisava estender essa aula desse tamanho por conta que isso aqui é a programação esse aqui é lógica de programação if é o seguinte e hell's normal o Davi ia saber isso eu acho que você já sabe o que é de novo para você aqui é a diretiva ver braço e ver traz é o difícil é novo para você juntando né com o data aqui então esse aqui é declaração
normal de qualquer linguagem de programação que você pode brincar aqui dentro do que você quiser você pode até utilizar É isso ou aquilo e aquilo outro fazer uma só confusão aqui sem problema nenhum contanto que é só declaração retorne verdadeiro ou falso E aí a depender da saída ele vai mostrar ou não né o alimento é feito então galera acho que é isso eu acho que super super super Claro a diretiva o conceito de diretiva e como utiliza o ver chover e a diferença mas se você ainda tem dúvida faz o que é só comentar
aqui embaixo ou vai lá no Instagram e manda mensagem para mim no privado Beleza Fico por aqui te vejo aí na próxima vídeo aula foi o E aí [Música] E aí E aí [Música]
