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">