diff --git a/src/guide/forms.md b/src/guide/forms.md index 1cccc84a7e..1ab08725bc 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -6,7 +6,9 @@ order: 10 ## 基础用法 -可以用 `v-model` 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,`v-model` 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。 +你可以用 `v-model` 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 `v-model` 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。 + +

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

### 文本 @@ -55,6 +57,8 @@ new Vue({ {% endraw %} +

在文本区域插值( `` ) 并不会生效,应用 `v-model` 来代替

+ ### 复选框 单个勾选框,逻辑值: @@ -121,7 +125,7 @@ new Vue({ {% endraw %} -### 单选 +### 单选按钮 ``` html @@ -153,9 +157,9 @@ new Vue({ {% endraw %} -### 选择 +### 选择列表 -单选: +单选列表: ``` html @@ -265,7 +269,7 @@ new Vue({ ## 绑定 value -对于单选按钮,勾选框及选择框选项,`v-model` 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): +对于单选按钮,勾选框及选择列表选项,`v-model` 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): ``` html @@ -299,7 +303,7 @@ vm.toggle === vm.a vm.toggle === vm.b ``` -### 单选 +### 单选按钮 ``` html @@ -310,7 +314,7 @@ vm.toggle === vm.b vm.pick === vm.a ``` -### 选项设置 +### 选择列表设置 ``` html ``` -这很有用,因为在带有`type="number"`时html输入的值也总是返回字符串类型。 +这通常很有用,因为在 `type="number"` 时 HTML 中输入的值也总是会返回字符串类型。 + +### `.trim` + +如果想让用户的输入内容自动去掉起始和结尾的空格。可以添加 `trim` 修饰符给 `v-model` 来处理输入值: + +``` html + +``` + ### `.trim`