Skip to content

Commit

Permalink
Merge pull request #110 from yangzj1992/2.0-cn
Browse files Browse the repository at this point in the history
proofread forms.md
  • Loading branch information
dingyiming committed Oct 9, 2016
2 parents 5efee86 + 79de9cf commit 9b1adc4
Showing 1 changed file with 24 additions and 11 deletions.
35 changes: 24 additions & 11 deletions src/guide/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ order: 10

## 基础用法

可以用 `v-model` 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,`v-model` 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。
你可以用 `v-model` 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 `v-model` 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。

<p class="tip"> `v-model` 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。</p>

### 文本

Expand Down Expand Up @@ -55,6 +57,8 @@ new Vue({
</script>
{% endraw %}

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

### 复选框

单个勾选框,逻辑值:
Expand Down Expand Up @@ -121,7 +125,7 @@ new Vue({
</script>
{% endraw %}

### 单选
### 单选按钮


``` html
Expand Down Expand Up @@ -153,9 +157,9 @@ new Vue({
</script>
{% endraw %}

### 选择
### 选择列表

单选:
单选列表:

``` html
<select v-model="selected">
Expand Down Expand Up @@ -184,7 +188,7 @@ new Vue({
</script>
{% endraw %}

多选(绑定到一个数组):
多选列表(绑定到一个数组):

``` html
<select v-model="selected" multiple>
Expand Down Expand Up @@ -265,7 +269,7 @@ new Vue({

## 绑定 value

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

``` html
<!-- 当选中时,`picked` 为字符串 "a" -->
Expand Down Expand Up @@ -299,7 +303,7 @@ vm.toggle === vm.a
vm.toggle === vm.b
```

### 单选
### 单选按钮

``` html
<input type="radio" v-model="pick" v-bind:value="a">
Expand All @@ -310,7 +314,7 @@ vm.toggle === vm.b
vm.pick === vm.a
```

### 选项设置
### 选择列表设置

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

### `.lazy`

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

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

### `.number`

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

``` html
<input v-model.number="age" type="number">
```

这很有用,因为在带有`type="number"`时html输入的值也总是返回字符串类型。
这通常很有用,因为在 `type="number"` 时 HTML 中输入的值也总是会返回字符串类型。

### `.trim`

如果想让用户的输入内容自动去掉起始和结尾的空格。可以添加 `trim` 修饰符给 `v-model` 来处理输入值:

``` html
<input v-model.trim="msg">
```



### `.trim`
Expand Down

0 comments on commit 9b1adc4

Please sign in to comment.