Improving the "Google Translation" in Vue (#28906)

This commit is contained in:
João Menighin
2019-08-16 13:28:24 -03:00
committed by Randell Dawson
parent 69500c6bbf
commit aedb472164

View File

@ -6,9 +6,9 @@ localeTitle: Controle de fluxo
### Condicionais
Com o Vue.js você pode decidir se mostra ou não um pedaço de código no seu final página, dependendo de alguma condição. Por exemplo, imagine uma entrada de formulário que seja necessário um texto com pelo menos 8 caracteres: se a entrada do usuário for menor que 8, que uma mensagem de erro deve aparecer; mas se a entrada for maior que 8, o mensagem desaparece.
Com o Vue.js você pode decidir se mostra ou não uma parte do seu componente dependendo de alguma condição. Por exemplo, imagine uma entrada de formulário que seja necessário um texto com pelo menos 8 caracteres: se a entrada do usuário for menor que 8, uma mensagem de erro deve aparecer; mas se a entrada for maior que 8, a mensagem desaparece.
Mas vamos fazer um exemplo mais simples. Queremos condicionar a exibição de um mensagem para um contador:
Um exemplo ainda mais simples é a exibição de um mensagem para um contador:
```html
@ -28,12 +28,12 @@ let app = new Vue({
});
```
Se você for ao console e começar a incrementar o contador, quando ele cruzar limite de 10, a mensagem será mostrada! Então, se você diminuir o `counter` , Vue.js irá esconder a mensagem quando o `counter` ficar abaixo de 10. Por isso, nós usei a diretiva `v-if` .
Se você for abrir o console e começar a incrementar o `counter`, quando ele cruzar limite de 10, a mensagem será mostrada! Então, se você diminuir o `counter` , Vue.js irá esconder a mensagem quando o `counter` ficar abaixo de 10. Por isso, usamos a diretiva `v-if` .
E você pode estar se perguntando se `else` para isso `if` . E há o `v-else` . Observe que o `v-else` sempre se
E você pode estar se perguntando se existe `else` para esse `if` . E há o `v-else` . Observe que o `v-else` sempre i
* esperar um `v-if` antes disso
* refere-se ao mais próximo `v-if` na página
* esperar um `v-if` anterior a ele
* ser referente ao `v-if` mais próximo
Vamos alterar um pouco nosso primeiro exemplo para entender isso.
@ -58,13 +58,13 @@ let app = new Vue({
});
```
Jogue um pouco com isso, alterando os valores dos `counter` e preste atenção ao mensagem mostrada.
Brinque um pouco com isso, alterando os valores dos `counter` e preste atenção na mensagem mostrada.
O Vue.js também possui a diretiva `v-else-if` .
O Vue.js também possui a diretiva `v-else-if`.
### rotações
### Repetições
O Vue.js também ajuda na geração de várias cópias do mesmo código estrutura, com laços. O exemplo clássico é uma lista renderizada dinamicamente.
O Vue.js também ajuda na geração de várias cópias do mesmo elemento, através laços. O exemplo clássico é uma lista renderizada dinamicamente.
```html
@ -91,7 +91,7 @@ let app = new Vue({
});
```
Muito mais fácil do que inserir muito `<li>` . E observe que sempre que a `list` mudanças, o resultado mudará em conformidade. Experimente: abra o console e `push` alguma string para a `list` com
Muito mais fácil que inserir vários `<li>`. E observe que sempre que a variavel `list` muda, o resultado é renderizado automaticamente. Experimente: abra o console e faça `push` de alguma string para a `list`
```javascript
app.list.push("something else");