話不多說，先上完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/vue.js"></script> <title></title> </head> <body> <h2>表單控件</h2> <div id="dr01"> <div> <h4>#Text</h4> <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="please input the message"> </div> <div> <h4>#CheckBox</h4> <input id="checkbox" type="checkbox" v-model="checked" /> <label for="checkbox">the checkbox is checked: {{checked}}</label> <br /> <input type="checkbox" id="box01" value="box01" v-model="checkedNames" /> <label for="box01">box01</label> <input type="checkbox" id="box02" value="box02" v-model="checkedNames" /> <label for="box02">box02</label> <input type="checkbox" id="box03" value="box03" v-model="checkedNames" /> <label for="box03">box03</label> <br /> <span>CheckedNames:{{checkedNames|json}}</span> </div> <div> <h4>#Radio</h4> <input type="radio" id="man" value="man" v-model="picked" /> <label for="man">man</label> <br /> <input type="radio" id="female" value="female" v-model="picked" /> <label for="female">female</label> <br /> <span>Picked: {{ picked }}</span> </div> <div> <h4>#Selected</h4> <p>單選</p> <select v-model="drSelected"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>the single selected is: {{drSelected}}</span> <p>多選</p> <select v-model="drMutiSelected" multiple style="text-align: center; overflow: hidden; width: 50px;"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>ctrl multiple selected:{{drMutiSelected}}</span> <p>動態選項，用v-for渲染：</p> <select v-model="dr02Selected"> <option v-for="option in options" v-bind:value="option.value"> {{option.text}} </option> </select> <span>Selected: {{ dr02Selected }}</span> </div> </div> <h2>綁定Value</h2> <div id="dr02"> <input id="02picked" type="radio" v-model="picked" v-bind:value="radio_picked"> <label for="02picked">the radio value:{{picked}}</label> <br /> <input id="02checkbox" type="checkbox" v-model="toggle" v-bind:true-value="check_true" v-bind:false-value="check_false" /> <label for="02checkbox">the checkbox value:{{toggle}}</label> <br /> <select v-model="selected"> <!-- 對象字面量 --> <option v-bind:value="{number:123}">123</option> </select> </div> <h2>參數特性</h2> <div id="dr03"> <h4>#lazy</h4> <!-- 在input元素中添加lazy屬性將會當input出發change時候觸發數據更新 --> <input id="msg03" v-model="msg03" lazy/> <label for="msg03">the input value is {{msg03}}</label> <h4>#number</h4> <input id="age" v-model="age" type="tel" number/> <label for="age">the age is {{age}}</label> <h4>#debounce</h4> <input id="debounce" v-model="username" debounce="500" /> <label for="debounce">username is {{username}}</label> </div> <script> var dr01 = new Vue({ el: '#dr01', data: { message: "msg", checked: false, drSelected: "", drMutiSelected: "", checkedNames: [], dr02Selected: "", options: [{ text: "one", value: "A" }, { text: "two", value: "B" }, { text: "three", value: "C" }, { text: "four", value: "D" }] } }); var dr02 = new Vue({ el: "#dr02", data: { picked: "unpicked", radio_picked: "picked", toggle: "un_checked", check_true: "checked", check_false: "un_checked", } }); var dr03 = new Vue({ el: "#dr03", data: { msg03: "msg03", age: 12, username: "wangzf", } }); </script> </body> </html>
#1、Text
最常見的input示例：
html
<h4>#Text</h4> <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="please input the message">
然后在js中定義data的message:"msg"
結果展示：
#2、CheckBox
html
第一個復選框沒有value屬性，綁定了model為"checked"，默認值是布爾類型，選中為true，未選中為false。
第二個復選框選項綁定的model是checkedNames，在多個選項中進行多選操作，最終的結果會將checkedNames轉化為json數組。
<h4>#CheckBox</h4> <input id="checkbox" type="checkbox" v-model="checked" /> <label for="checkbox">the checkbox is checked: {{checked}}</label> <br /> <input type="checkbox" id="box01" value="box01" v-model="checkedNames" /> <label for="box01">box01</label> <input type="checkbox" id="box02" value="box02" v-model="checkedNames" /> <label for="box02">box02</label> <input type="checkbox" id="box03" value="box03" v-model="checkedNames" /> <label for="box03">box03</label> <br /> <span>CheckedNames:{{checkdNames|json}}</span>
在js中定義初始值checked:false，checkedNames:[]（在這里復選框要轉化為json格式的數組，所以一定要定義為空的數組，勾選某個選項后，自動更新為新的json數組）
checked: false, checkedNames: [],
結果展示
當選中第一個復選框，第二個復選框按照231的順序勾選的結果（與數組操作類似，入棧出棧的順序）：
#3、Radio
html
<h4>#Radio</h4> <input type="radio" id="man" value="man" v-model="picked" /> <label for="man">man</label> <br /> <input type="radio" id="female" value="female" v-model="picked" /> <label for="female">female</label> <br /> <span>Picked: {{ picked }}</span>
因為在頁面中定義了v-model="picked"，所以我們需要在js中的vue組件中定義data的picked屬性，如果默認都不選擇，則定義picked:""，如果默認選擇man，則定義picked:"man"，如果默認選擇female，則定義picked:"female"。
這里定義的是默認man。
#4、Select
html
<h4>#Selected</h4> <p>單選</p> <select v-model="drSelected"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>the single selected is: {{drSelected}}</span>
在js中的vue組件中定義data屬性 drSelected: "",
因為在頁面中我們默認選中A，所以即使初始化的時候drSelected是空字符串，頁面加載完畢后也會賦值給selected "A"
初始化頁面展示：
#5、Select
5.1 多選
html:
<p>多選（按ctrl多選）</p> <select v-model="drMutiSelected" multiple style="text-align: center; overflow: hidden; width: 50px;"> <option selected="selected">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>ctrl multiple selected:{{drMutiSelected}}</span>
在js中定義vue組件的data屬性 drMutiSelected: "", 這里和checkbox不同，多選的結果順序按照從上到下，簡單的說就是每個選項都是有序號的，按照序號排列
結果展示：
5.2 select動態渲染
html
<p>動態選項，用v-for渲染：</p> <select v-model="dr02Selected"> <option v-for="option in options" v-bind:value="option.value"> {{option.text}} </option> </select> <span>Selected: {{ dr02Selected }}</span>
js中的data屬性添加option數組
options: [{ text: "one", value: "A" }, { text: "two", value: "B" }, { text: "three", value: "C" }, { text: "four", value: "D" }]
解釋：
在下拉菜單中定義選項為遍歷options數組的結果，option顯示的是option.text屬性，並把對應的值option.value綁定給當前選項
頁面初始化：
#綁定Value
<h2>綁定Value</h2> <div id="dr02"> <input id="man02" type="radio" v-model="gender" v-bind:value="man02"> <label for="man02">{{man02}}</label> <input id="female02" type="radio" v-model="gender" v-bind:value="female02"> <label for="female02">{{female02}}</label> <div>your gender is {{gender}}</div> <br /> <input id="02checkbox" type="checkbox" v-model="toggle" v-bind:true-value="check_true" v-bind:false-value="check_false" /> <label for="02checkbox">the checkbox value:{{toggle}}</label> </div>
js中定義的vue組件：
var dr02 = new Vue({ el: "#dr02", data: { gender: "", man02: "man", female02: "female", toggle: "un_checked", check_true: "checked", check_false: "un_checked", selected02: "" } });
解釋：
1、radio。
與上面radio不同的是，input中的value值替換成了我們自己定義的數據，將man02和female02的值綁定到了input中，默認不選中某一個，當選中man時，value的值就是data中的man02的值，當選中female時，value的值就是data中的female02的值
2、checkbox。
與上面的checkbox不同，這里的checkbox綁定了選中和未選中的兩種狀態的值，選中時value為data中的check_true的值，為選中時value為data中的check_false的值。
頁面初始化：
#參數特性
<h2>參數特性</h2> <div id="dr03"> <h4>#lazy</h4> <!-- 在input元素中添加lazy屬性將會當input出發change時候觸發數據更新 --> <input id="msg03" v-model="msg03" lazy/> <label for="msg03">the input value is {{msg03}}</label> <h4>#number</h4> <input v-model="age" number> <label for="age">the age is {{age}}</label> <h4>#debounce</h4> <input id="debounce" v-model="username" debounce="500" /> <label for="debounce">username is {{username}}</label> </div>
在js中添加vue組件
var dr03 = new Vue({ el: "#dr03", data: { msg03: "msg03", age: 12, username: "pxy", } });
理解：
1、lazy，延遲數據更新，這里並不是說取數據的時候才要更新數據，而是說在綁定的值確定發生變化的時候才要更新數據，示例中是id為"msg03"觸發onchange的時候更新數據，簡單的說就是當input失去焦點的時候觸發數據更新。
2、number，在綁定的元素上添加number屬性，如果當前的數值可以轉化為number，則更新后的數據為number類型，如果當前的數值不能轉化為number類型，則更新后的數據一般轉化為string類型。
3、debounce，英文的意思是去除抖動。這里設置debounce="500"，如果輸入過程中兩次輸入的值的間隔時間不超過500ms，則不觸發數據更新，不輸入超過500ms則觸發數據更新。
結果測試：
