Vue2.0学习--基础--8--表单输入绑定

（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

 在后面的“深入了解组件”中讨论。