(day8-1)
这一章讲的就是 v-model 和表单控件的那些事儿。
基础用法:在不同表单控件中使用 v-model 。
值绑定:v-model 中的值 和表单控件的value值绑定在了一起。
修饰符:.lazy、.number、.trim 对 v-model 的进一步修饰。
在组件上使用 v-model :这个留到后面讲到组件的时候再来探寻。
一、基础用法
在不同的表单控件中使用 v-model 指令:
- 文本:input text
- 多行文本:textarea
- 复选框:input checkbox (单个、多个)
- 单选按钮:input radio
- 选择框:<select> (单选、多选(multiple)、用v-for渲染动态选项)
其实在前面我们已经接触到了 v-model 指令好几次了。不过在前面,我们都是在 <input> 中使用 v-model 指令。
v-model 指令与控件之间的数据关系大致可以这么理解:
这里的 v-moel 里面的newText 绑定的就是各个控件的 value值。
意味着我们用表单控件做出了一些操作,输入文本也好、输入多段文本、单选也好、复选也好,这些操作的发生,就会导致控件value 的改变,这个value的值呢,我们用 v-model 指令定义的变量名来绑定。
之后,我们就可以在JavaScript不同的地方调用这个变量名,做一些我们想要完成的操作。
v-model的本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意:v-model 会忽略所有表单元素的 value 、 checked 、selected 属性的初始值而总是将Vue实例的数据作为数据 来源。你应该通过JavaScript在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的property并抛出不同的事件:
- text、textarea元素使用 value property 和input事件;
- checkbox、radio使用checked property 和change事件;
- select 字段将 value 作为prop并将 change 作为事件。
接下来我们就是要一个一个的看在不同的表单控件中使用 v-model 的情况——具体的示例就自己下去看着官网的例子一个一个的完成一边就好了,很简单。
二、值绑定
签名有提到,在<input>中,我们的 v-model 指令定义的变量名绑定的是 <input>的value值。
这里大概有这几种控件:
- 文本:input text
- 多行文本:textarea
- 复选框:input checkbox (单个、多个)
- 单选按钮:input radio
- 选择框:<select> (单选、多选(multiple)、用v-for渲染动态选项)
前面两个,v-model 绑定的就是它们的 value 值;
后面三个,v-model 绑定的值通常是静态字符串(对于复选框也可以是布尔值)。(在我看来,官网举的例子就是绑定它们的 value 值)
具体的示例:#复选框、#单选按钮、#选择框的选项都按照官网的示例操作一遍,很简单的。
三、修饰符
.lazy、.number、.trim
# .lazy
默认情况下, v-model 在每次input 事件触发之后将输入框的值与数据同步,添加lazy修饰符,转为在change事件 之后 进行同步 :
<!--在"change"时而非"input"时更新-->
<input v-model.lazy="msg">
# .number
自动将用户的输入值咋混为数值类型:
<input v-model.number="age" type="number">
这通常很有用,因为即使在 type="number"
时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()
解析,则会返回原始的值。
# .trim
自动过滤用户输入的首位空白字符:
<input v-model.trim="msg">
四、在组件上使用 v-model
在后面的“深入了解组件”中讨论。