Skip to content

Commit d3f3f7a

Browse files
author
unknown
committed
Merge branch '2.0-cn' of https://github.com/vuefe/vuejs.org into 2.0-cn
2 parents 6ab611d + 9b1adc4 commit d3f3f7a

File tree

1 file changed

+24
-11
lines changed

1 file changed

+24
-11
lines changed

src/guide/forms.md

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ order: 10
66

77
## 基础用法
88

9-
可以用 `v-model` 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,`v-model` 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。
9+
你可以用 `v-model` 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 `v-model` 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。
10+
11+
<p class="tip"> `v-model` 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。</p>
1012

1113
### 文本
1214

@@ -55,6 +57,8 @@ new Vue({
5557
</script>
5658
{% endraw %}
5759

60+
<p class="tip">在文本区域插值( `<textarea>{{text}}</textarea>` ) 并不会生效,应用 `v-model` 来代替</p>
61+
5862
### 复选框
5963

6064
单个勾选框,逻辑值:
@@ -121,7 +125,7 @@ new Vue({
121125
</script>
122126
{% endraw %}
123127

124-
### 单选
128+
### 单选按钮
125129

126130

127131
``` html
@@ -153,9 +157,9 @@ new Vue({
153157
</script>
154158
{% endraw %}
155159

156-
### 选择
160+
### 选择列表
157161

158-
单选:
162+
单选列表:
159163

160164
``` html
161165
<select v-model="selected">
@@ -184,7 +188,7 @@ new Vue({
184188
</script>
185189
{% endraw %}
186190

187-
多选(绑定到一个数组):
191+
多选列表(绑定到一个数组):
188192

189193
``` html
190194
<select v-model="selected" multiple>
@@ -265,7 +269,7 @@ new Vue({
265269

266270
## 绑定 value
267271

268-
对于单选按钮,勾选框及选择框选项`v-model` 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):
272+
对于单选按钮,勾选框及选择列表选项`v-model` 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):
269273

270274
``` html
271275
<!-- 当选中时,`picked` 为字符串 "a" -->
@@ -299,7 +303,7 @@ vm.toggle === vm.a
299303
vm.toggle === vm.b
300304
```
301305

302-
### 单选
306+
### 单选按钮
303307

304308
``` html
305309
<input type="radio" v-model="pick" v-bind:value="a">
@@ -310,7 +314,7 @@ vm.toggle === vm.b
310314
vm.pick === vm.a
311315
```
312316

313-
### 选项设置
317+
### 选择列表设置
314318

315319
``` html
316320
<select v-model="selected">
@@ -329,7 +333,7 @@ vm.selected.number // -> 123
329333

330334
### `.lazy`
331335

332-
在默认情况下,`v-model``input` 事件中同步输入框值与数据,可以添加一个修饰符 `lazy`从而改到在 `change` 事件中同步:
336+
在默认情况下,`v-model` `input` 事件中同步输入框值与数据,但你可以添加一个修饰符 `lazy`从而转变为在 `change` 事件中同步:
333337

334338
``` html
335339
<!-- 在 "change" 而不是 "input" 事件中更新 -->
@@ -339,13 +343,22 @@ vm.selected.number // -> 123
339343

340344
### `.number`
341345

342-
如果想自动将用户的输入转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 `number``v-model`来处理输入值:
346+
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 `number``v-model` 来处理输入值:
343347

344348
``` html
345349
<input v-model.number="age" type="number">
346350
```
347351

348-
这很有用,因为在带有`type="number"`时html输入的值也总是返回字符串类型。
352+
这通常很有用,因为在 `type="number"` 时 HTML 中输入的值也总是会返回字符串类型。
353+
354+
### `.trim`
355+
356+
如果想让用户的输入内容自动去掉起始和结尾的空格。可以添加 `trim` 修饰符给 `v-model` 来处理输入值:
357+
358+
``` html
359+
<input v-model.trim="msg">
360+
```
361+
349362

350363

351364
### `.trim`

0 commit comments

Comments
 (0)