@@ -6,7 +6,9 @@ order: 10
6
6
7
7
## 基础用法
8
8
9
- 可以用 ` v-model ` 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,` v-model ` 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。
9
+ 你可以用 ` v-model ` 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 ` v-model ` 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。
10
+
11
+ <p class =" tip " > `v-model` 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。</p >
10
12
11
13
### 文本
12
14
@@ -55,6 +57,8 @@ new Vue({
55
57
</script >
56
58
{% endraw %}
57
59
60
+ <p class =" tip " >在文本区域插值( `<textarea >{{text}} </textarea >` ) 并不会生效,应用 `v-model` 来代替</p >
61
+
58
62
### 复选框
59
63
60
64
单个勾选框,逻辑值:
@@ -121,7 +125,7 @@ new Vue({
121
125
</script >
122
126
{% endraw %}
123
127
124
- ### 单选
128
+ ### 单选按钮
125
129
126
130
127
131
``` html
@@ -153,9 +157,9 @@ new Vue({
153
157
</script >
154
158
{% endraw %}
155
159
156
- ### 选择
160
+ ### 选择列表
157
161
158
- 单选 :
162
+ 单选列表 :
159
163
160
164
``` html
161
165
<select v-model =" selected" >
@@ -184,7 +188,7 @@ new Vue({
184
188
</script >
185
189
{% endraw %}
186
190
187
- 多选 (绑定到一个数组):
191
+ 多选列表 (绑定到一个数组):
188
192
189
193
``` html
190
194
<select v-model =" selected" multiple >
@@ -265,7 +269,7 @@ new Vue({
265
269
266
270
## 绑定 value
267
271
268
- 对于单选按钮,勾选框及选择框选项 ,` v-model ` 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):
272
+ 对于单选按钮,勾选框及选择列表选项 ,` v-model ` 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):
269
273
270
274
``` html
271
275
<!-- 当选中时,`picked` 为字符串 "a" -->
@@ -299,7 +303,7 @@ vm.toggle === vm.a
299
303
vm .toggle === vm .b
300
304
```
301
305
302
- ### 单选
306
+ ### 单选按钮
303
307
304
308
``` html
305
309
<input type =" radio" v-model =" pick" v-bind:value =" a" >
@@ -310,7 +314,7 @@ vm.toggle === vm.b
310
314
vm .pick === vm .a
311
315
```
312
316
313
- ### 选项设置
317
+ ### 选择列表设置
314
318
315
319
``` html
316
320
<select v-model =" selected" >
@@ -329,7 +333,7 @@ vm.selected.number // -> 123
329
333
330
334
### ` .lazy `
331
335
332
- 在默认情况下,` v-model ` 在` input ` 事件中同步输入框值与数据,可以添加一个修饰符 ` lazy ` ,从而改到在 ` change ` 事件中同步:
336
+ 在默认情况下,` v-model ` 在 ` input ` 事件中同步输入框值与数据,但你可以添加一个修饰符 ` lazy ` ,从而转变为在 ` change ` 事件中同步:
333
337
334
338
``` html
335
339
<!-- 在 "change" 而不是 "input" 事件中更新 -->
@@ -339,13 +343,22 @@ vm.selected.number // -> 123
339
343
340
344
### ` .number `
341
345
342
- 如果想自动将用户的输入转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 ` number ` 给 ` v-model ` 来处理输入值:
346
+ 如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 ` number ` 给 ` v-model ` 来处理输入值:
343
347
344
348
``` html
345
349
<input v-model.number =" age" type =" number" >
346
350
```
347
351
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
+
349
362
350
363
351
364
### ` .trim `
0 commit comments