Vue表单控件绑定

　　在Web应用中，我们经常会使用表单向服务端提交一些数据，而通常也会在表单项中绑定一些如input、change等事件对用户输入的数据进行校验、更新等操作。在Vue.js中我们可以使用v-model指令同步用户输入的数据到Vue示例data属性中，同时会对radio、checkbox、select等原生表单组件提供一些语法糖使表单操作更加容易。

一、基本用法

　　下面我们列举基本例子来看看如何使用v-model更新表单控。

　　1.text

　　设置文本框v-model为name，代码示例如下

　　

<span>Welcome{{name}}</span>
<br>
<input type="text" v-model="name" placeholder="join DDFE">

　　当用户操作文本框时，vm.name会自动更新为用户输入的值，同时，span内的内容也会随之改变。

　　2.checkbox

　　复选框checkbox在表单中会经常使用，下面我们来看看单个checkbox如何使用v-model。代码示例如下：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>

　　当用户勾选了checkbox时，vm.checked=true,否则vm.checked=false,label中的值也会随之改变。

　　3.radio

　　当单选钮被选中时，v-model中的变量值会被赋值为对应的value值。代码示例如下:

<input type="radio" id="flash" value="flash" v-model="bizLine">
<label for="flash">快车</label>
<br>
<input type="radio" id="bus" value="bus" v-model="bizLine">
<label for="bus">巴士</label>
<br>
<span>Picked:{{bizLine}}</span>

　　4.select

　　因为select控件分为单选和多选，所以v-model在select控件的单选和多选上会有不同的表现。代码示例如下：

<select v-model="bizLine">
    <option selected value="flash">快车</option>
    <option value="premium">专车</option>
    <option value="bus">巴士</option>
</select>
<span>Selected:{{bizLine}}</span>

　当被选中的option有value属性时，vm.selected为对应option的value值；否则为对应的text值。

二、值绑定

　　通常情况下，对于radio、checkbox、select组件，通过v-model绑定的值都是字符串，checkbox除外，checkbox可能是布尔值。

　　有时我们会有动态绑定Vue.js实例属性的需求，这时可以使用v-bind来实现这个需求。通过v-bind来代替直接使用value属性，我们还可以绑定非字符串的值，如数值、对象、数组等。

三、v-model修饰指令

　　v-model用来在视图与Model之间同步数据，但是有时候我们需要控制同步发生的时机，或者在数据同步到Model之前将数据转换为Number类型。我们可以在v-model指令所在的form控件上添加相应的修饰指令来实现这个需求。

　　1、lazy

　　在默认情况下，v-model在input事件中同步输入框的值与数据，可以添加一个lazy特性，从而改到在change事件中去同步。代码示例如下：

<input v-model="msg" lazy>
{{msg}}

　　2.debounce

　　设置一个最小的延时，在每次敲击之后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作（例如，在输入提示中ajax请求）时，它较为有用。代码示例如下：

<input v-model="msg" debounce="500">

　　用户输入完毕500ms后，vm.msg才会被更新。

　　注：该指令是用来延迟同步用户输入的数据到Model中，并不会延迟用户输入事件的执行。所以如果要想获取变化后的数据，我们应该用vm.$watch()来监听msg的变化，而不是在事件中获取最新数据。

　　3.number

　　当传给后端的字段类型必须是数值的时候，我们可以在v-model所在控件上使用number指令，该指令会在用户输入被同步到Model中时将其转换为数值类型，如果转换结果为NaN，则对应的Model值还是用户输入的原始值。代码示例如下：

<input v-model="age" number>

 

 

 

　　

转载于:https://www.cnblogs.com/yc-1314/p/10232451.html