Improving the "Google Translation" in Vue (#28906)
This commit is contained in:
committed by
Randell Dawson
parent
69500c6bbf
commit
aedb472164
@ -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 há `else` para isso `if` . E há o `v-else` . Observe que o `v-else` sempre será
|
||||
E você pode estar se perguntando se existe `else` para esse `if` . E há o `v-else` . Observe que o `v-else` sempre irá
|
||||
|
||||
* 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,10 +91,10 @@ 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");
|
||||
```
|
||||
|
||||
Como esperado, a página renderizada agora tem o nosso novo item!
|
||||
Como esperado, a página renderizada agora tem o nosso novo item!
|
||||
|
Reference in New Issue
Block a user