Vue#表单控件绑定

使用v-model 在表单控件上实现数据双向绑定。

单选:https://jsfiddle.net/miloer/bs49p0fx/

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

　　

多个勾选：https://jsfiddle.net/miloer/bs49p0fx/1/

绑定多个元素，最后经过Vue过滤，用Json的格式，输出出来。我以为挺优雅的。

#radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

#select
<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

　　

https://jsfiddle.net/miloer/bs49p0fx/2/结合以上，用V-for渲染，动态去绑定的一个小例子，我以为这个，仍是挺有用的，记得刚上大学那会，学的.NET，老师有一次做业就让你们完成相似的功能。

值绑定：

有时咱们想绑定值到 Vue 实例一个动态属性上。能够用 v-bind 作到。 并且 v-bind容许绑定输入框的值到非字符串值。

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">

　　

参数特性：

// 选中
vm.toggle === vm.a
// 取消选中
vm.toggle === vm.b

　　

lazy:在默认状况下，v-model 在input 事件中同步输入框值与数据，能够添加一个特性lazy，从而改到在 change 事件中同步

number:将用户的输入保持为数字

debounce: 设置一个最小延迟，官方提到若是每次更新都要进行高耗操做（例如在输入提示中 Ajax 请求），它较为有用。

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