Skip to content

Commit 8d2e11c

Browse files
LucasFlaquerLucasFlaquer
committed
codepen links text
1 parent 8efb0b9 commit 8d2e11c

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

‎src/guide/forms.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ Para idiomas que requerem um [IME](https://en.wikipedia.org/wiki/Input_method) (
4343
```
4444

4545
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="xxGyXaG" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: textarea">
46-
<span>veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/bGpmMqw">
46+
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/bGpmMqw">
4747
Lidando com Formulários: textarea</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
4848
no <a href="https://codepen.io">CodePen</a>.</span>
4949
</p>
@@ -69,7 +69,7 @@ Caixa de seleção única, valor booleano:
6969
```
7070

7171
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="PoqyJVE" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: checkbox">
72-
<span>veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/details/KKzGRWq">
72+
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/details/KKzGRWq">
7373
Lidando com Formulários: checkbox</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
7474
no <a href="https://codepen.io">CodePen</a>.</span>
7575
</p>
@@ -96,12 +96,12 @@ Vue.createApp({
9696
return {
9797
checkedNames: []
9898
}
99-
},
99+
}
100100
}).mount('#v-model-multiple-checkboxes')
101101
```
102102

103103
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="bGdmoyj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: multiplos checkboxes">
104-
<span>veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/ExKdLWp">
104+
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/ExKdLWp">
105105
Lidando com Formulários: múltiplos <i>checkboxes</i></a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
106106
no <a href="https://codepen.io">CodePen</a>.</span>
107107
</p>
@@ -127,12 +127,12 @@ Vue.createApp({
127127
return {
128128
picked: ''
129129
}
130-
},
130+
}
131131
}).mount('#v-model-radiobutton')
132132
```
133133

134134
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="MWwPEMM" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: radiobutton">
135-
<span>veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/dyMgeRE">
135+
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/dyMgeRE">
136136
Lidando com Formulários: radiobutton</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
137137
no <a href="https://codepen.io">CodePen</a>.</span>
138138
</p>
@@ -158,14 +158,14 @@ Seleção de um único item:
158158
Vue.createApp({
159159
data() {
160160
return {
161-
selected: '',
161+
selected: ''
162162
}
163-
},
163+
}
164164
}).mount('#v-model-select')
165165
```
166166

167167
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="KKpGydL" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: select">
168-
<span>veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/VwaExpO">
168+
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/VwaExpO">
169169
Lidando com Formulários: select</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
170170
no <a href="https://codepen.io">CodePen</a>.</span>
171171
</p>
@@ -188,7 +188,7 @@ Seleção de múltiplos itens (vinculando a um Array):
188188
```
189189

190190
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="gOpBXPz" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: seleção de múltiplos itens (vinculando a um Array)">
191-
<span>veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/abNRGWR">
191+
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/abNRGWR">
192192
Lidando com Formulários: seleção de múltiplos itens (vinculando a um Array)</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
193193
no <a href="https://codepen.io">CodePen</a>.</span>
194194
</p>
@@ -216,22 +216,22 @@ Vue.createApp({
216216
{ text: 'Um', value: 'A' },
217217
{ text: 'Dois', value: 'B' },
218218
{ text: 'Três', value: 'C' },
219-
],
219+
]
220220
}
221-
},
221+
}
222222
}).mount('#v-model-select-dynamic')
223223
```
224224

225225
<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="abORVZm" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: select com opções dinâmicas">
226-
<span>veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/BaKqxRK">
226+
<span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/BaKqxRK">
227227
Lidando com Formulários: select com opções dinâmicas</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
228228
no <a href="https://codepen.io">CodePen</a>.</span>
229229
</p>
230230
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
231231

232232
## Interligação de Valores
233233

234-
Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` são sempre strings estáticas (ou valores booleanos no caso do _checkbox_):
234+
Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` são sempre _strings_ estáticas (ou valores _boolean_ no caso do _checkbox_):
235235

236236
```html
237237
<!-- `picked` é uma string "a" quando assinalado -->
@@ -246,7 +246,7 @@ Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` s
246246
</select>
247247
```
248248

249-
Mas às vezes podemos querer vincular o valor à uma propriedade dinâmica na atual instância ativa. Nós podemos utilizar `v-bind` para alcançar isso. Além disso, utilizando `v-bind` nos permite vincular o valor de um _input_ para valores que não são uma string (non-string values).
249+
Mas às vezes podemos querer vincular o valor à uma propriedade dinâmica na atual instância ativa. Nós podemos utilizar `v-bind` para alcançar isso. Além disso, utilizando `v-bind` nos permite vincular o valor de um _input_ para valores que não são uma _string_ _(non-string values)_.
250250

251251
### Checkbox
252252

@@ -262,7 +262,7 @@ vm.toggle === 'no'
262262
```
263263

264264
:::tip Dica
265-
Os atributos `true-value` e `false-value` não afetam o atributo `value` dos _input's_, porque os browsers não incluem caixas de seleção não assinaladas nas submissões de formulários. Para garantir que um dos dois valores seja enviado em um formulário (p. ex. "sim" ou "não"), use _inputs_ do tipo _radio_.
265+
Os atributos `true-value` e `false-value` não afetam o atributo `value` dos _inputs_, porque os browsers não incluem caixas de seleção não assinaladas nas submissões de formulários. Para garantir que um dos dois valores seja enviado em um formulário (p. ex. "sim" ou "não"), use _inputs_ do tipo _radio_.
266266
:::
267267

268268
### Radio
@@ -314,7 +314,7 @@ Isto geralmente é útil, porque mesmo com `type="number"`, o valor do elemento
314314

315315
### `.trim`
316316

317-
Se você quiser que os espaços em branco do _input_ do usuário sejam automaticamente cortados, pode adicionar o modificador `trim` ao `v-model` do elemento:
317+
Se você quiser que os espaços em branco excedentes de um _input_ sejam automaticamente removidos, é possível adicionar o modificador `trim` ao `v-model` do elemento:
318318

319319
```html
320320
<input v-model.trim="msg" />
@@ -324,4 +324,4 @@ Se você quiser que os espaços em branco do _input_ do usuário sejam automatic
324324

325325
> Se você ainda não está familiarizado com os componentes Vue, pode pular isto por enquanto.
326326
327-
os tipos de _input_ nativos do HTML nem sempre atendem as suas necessidades. Felizmente, os componentes Vue te permitem construir _inputs_ reutilizáveis com comportamento completamente costumizável. Estes componentes também funcionam com `v-model`! Para saber mais, leia sobre [inputs customizados](./component-basics.html#using-v-model-on-components) no guia de Componentes.
327+
Os tipos de _input_ nativos do HTML nem sempre atendem as suas necessidades. Felizmente, os componentes Vue te permitem construir _inputs_ reutilizáveis com comportamento completamente costumizável. Estes componentes também funcionam com `v-model`! Para saber mais, leia sobre [_inputs_ customizados](./component-basics.html#using-v-model-on-components) no guia de Componentes.

0 commit comments

Comments
 (0)