From a11c9b2a5fe1c32ebf488618a0134c5b93ed6753 Mon Sep 17 00:00:00 2001
From: Arthur Ribeiro <devarthurribeiro@gmail.com>
Date: Fri, 21 Dec 2018 21:35:29 -0300
Subject: [PATCH] Add conditional vue pt (#21341)

---
 guide/portuguese/vue/conditionals/index.md | 103 +++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 guide/portuguese/vue/conditionals/index.md

diff --git a/guide/portuguese/vue/conditionals/index.md b/guide/portuguese/vue/conditionals/index.md
new file mode 100644
index 0000000000..6fc55ecc2d
--- /dev/null
+++ b/guide/portuguese/vue/conditionals/index.md
@@ -0,0 +1,103 @@
+---
+title: Conditional
+localeTitle: Condicionail
+---
+## `v-if`
+
+Em _templates_ estilo Handlebars, poderíamos escrever blocos condicionais como este:
+
+``` html
+<!-- Handlebars template -->
+{{#if ok}}
+  <h1>Sim</h1>
+{{/if}}
+```
+
+No Vue, usamos a diretiva `v-if` para atingir o mesmo resultado:
+
+``` html
+<h1 v-if="ok">Sim</h1>
+```
+
+Também é possível adicionar um "bloco senão" usando `v-else`:
+
+``` html
+<h1 v-if="ok">Sim</h1>
+<h1 v-else>Não</h1>
+```
+
+### Grupos Condicionais com `<template>`
+
+Como `v-if` é uma diretiva, deve ser anexado a um único elemento. E se quisermos alternar mais de um elemento? Podemos usar `v-if` em um elemento `<template>`, que serve como um invólucro invisível. O resultado final processado não incluirá o elemento `<template>`.
+
+``` html
+<template v-if="ok">
+  <h1>Título</h1>
+  <p>Parágrafo 1</p>
+  <p>Parágrafo 2</p>
+</template>
+```
+
+### `v-else`
+
+É possível utilizar a diretiva `v-else` para indicar um "bloco _else_" para o `v-if`:
+
+``` html
+<div v-if="Math.random() > 0.5">
+  Agora você me vê
+</div>
+<div v-else>
+  Agora você não me vê
+</div>
+```
+
+Um elemento `v-else` deve seguir imediatamente um elemento `v-if` ou `v-else-if`, caso contrário não será reconhecido.
+
+### `v-else-if`
+
+> Na versão 2.1.0+
+
+O `v-else-if`, como o nome sugere, serve como um "bloco _else if_" ao `v-if`. Pode inclusive ser encadeado várias vezes:
+
+```html
+<div v-if="type === 'A'">
+  A
+</div>
+<div v-else-if="type === 'B'">
+  B
+</div>
+<div v-else-if="type === 'C'">
+  C
+</div>
+<div v-else>
+  Não é A, B ou C
+</div>
+```
+
+Similar ao `v-else`, um `v-else-if` deve seguir imediatamente um elemento `v-if` ou um elemento `v-else-if`.
+
+## `v-show`
+
+Outra opção para mostrar condicionalmente um elemento é a diretiva `v-show`. A utilização é basicamente a mesma.
+
+``` html
+<h1 v-show="ok">Olá!</h1>
+```
+
+A diferença é que um elemento com `v-show` sempre será renderizado e permanecerá no DOM; `v-show` simplesmente alterna a propriedade CSS `display` do elemento.
+
+<p class="tip">Observe que `v-show` não oferece suporte à utilização em elementos `<template>` e também não funciona com `v-else`.</p>
+
+## `v-if` vs. `v-show`
+
+`v-if` é a renderização condicional "real", pois garante que eventos e componentes filhos dentro do bloco condicional sejam devidamente destruídos e recriados durante a alternância.
+
+`v-if` também é **preguiçoso**: se a condição for _false_ na renderização inicial, nada será feito - o bloco condicional não será processado até que a condição se torne _true_ pela primeira vez.
+
+Em comparação, `v-show` é mais simples - o elemento sempre será renderizado independentemente da condição inicial, com alternância baseada em CSS.
+
+De modo geral, `v-if` tem custo maior durante alternâncias de visibilidade, enquanto `v-show` tem custo maior na renderização inicial. Então prefira `v-show` se precisar alternar a visibilidade de algo com muita frequência; e prefira `v-if` se a condição não tem tanta probabilidade de se modificar durante a execução.
+
+## `v-if` com `v-for`
+
+Quando utilizado em conjunto com `v-for`, este possui maior prioridade do que o `v-if`. Veja o guia de <a href="../guide/list.html#v-for-com-v-if">renderização de listas</a> para mais detalhes.