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 + +{{#if ok}} +
Parágrafo 1
+Parágrafo 2
+ +``` + +### `v-else` + +É possível utilizar a diretiva `v-else` para indicar um "bloco _else_" para o `v-if`: + +``` html +Observe que `v-show` não oferece suporte à utilização em elementos `` e também não funciona com `v-else`.
+ +## `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 renderização de listas para mais detalhes.