<div id="app"> <input type="text" v-model="text"/> <div>{{text}}</div> <div>――――――――――――――</div> <textarea style="width:200px;height:100px;" v-model="textarea"></textarea> <div>{{textarea}}</div> <div>――――――――――――――</div> <label><input type="checkbox" v-model="checkbox"/>左邊選中右邊則為true：{{checkbox}}</label> <div>――――――――――――――</div> <label><input type="checkbox" value="firstCheckbox" v-model="checkboxes">firstCheckbox</label><br/> <label><input type="checkbox" value="secondCheckbox" v-model="checkboxes">secondCheckbox</label><br/> <label><input type="checkbox" value="thirdCheckbox" v-model="checkboxes">thirdCheckbox</label><br/> <div>以上選中的value情況為：{{checkboxes}}</div> <div>以上選中的value情況為（以json格式顯示，這里使用了json過濾器）：{{checkboxes|json}}</div> <div>――――――――――――――</div> <label><input type="radio" value="A" v-model="radio"/>value = A</label><br> <label><input type="radio" value="B" v-model="radio"/>value = B</label><br> <div>{{radio}}</div> <div>注意，這里的v-model的值應該被注冊到data里面，否則會紅字警告（事實上，所有的都應該也這么做）</div> <div>――――――――――――――</div> <select v-model="select"> <option>默認值，option不設value</option> <option value="B">value的值設為B</option> <option selected value="C">默認選擇這個，value設為C</option> </select> <div>{{select}}</div> <div>同樣，這里不注冊也會被報錯</div> <div>――――――――――――――</div> <div>以下是select的多選，按住ctrl可以連續選，按住shift選擇區間</div> <select style="width:200px;height:100px;overflow: hidden;" v-model="multiple" multiple> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <div>多選選中的值是：{{multiple}}</div> <div>注意，這個多選select框是默認帶y軸的滾動條的</div> <div>――――――――――――――</div> <div>動態渲染，checkbox和多選select框是互相影響的</div> <label><input type="checkbox" value="A" v-model="Dynamic">A</label><br/> <label><input type="checkbox" value="B" v-model="Dynamic">B</label><br/> <label><input type="checkbox" value="C" v-model="Dynamic">C</label><br/> <select style="width:200px;height:100px;overflow: hidden;" v-model="Dynamic" multiple> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <div>選中情況是：{{Dynamic}}</div> <div>――――――――――――――</div> <div>選中和選中的值自定義的checkbox</div> <label><input type="checkbox" v-bind:true-value="differentValues.t" v-bind:false-value="differentValues.f" v-model="different">true/false</label><br/> <div>different value: {{different}}</div> <div>注意，以上不能像普通checkbox那么樣，用一個數組作為多個checkbox的v-model的變量，且其值是綁定與vm實例的某個屬性； 因此，不能在v-bind里的值是一個字符串，但可以是一個對象，例如{a:1}這樣（當然，這個時候顯示的值也是一個對象了） </div> <div>――――――――――――――</div> <div>自定義之的radio</div> <label><input type="radio" v-bind:value="text" v-model="customize"/>值為1</label> <label><input type="radio" v-bind:value="textarea" v-model="customize"/>值為1</label> <div>{{customize}}</div> <div>同樣，值可以是vm的一個屬性或者是一個對象，另外，同樣有效的還有select。（主要就這三個有選中狀態，除此之外雖然例如Date類型也有選中，但是意義不大）</div> <div>――――――――――――――</div> </div> <script> var vm = new Vue({ el: '#app', data: { text: "默認有輸入內容", textarea: "這里是多行文字/n第二行，//n是換行符，但在字符串里顯示為空格", checkboxes: [], radio: "", select: "", multiple: "", Dynamic: {}, different: "", differentValues: { t: "true", f: "false" }, customize: '' } }) </script>

<input type="text" v-model="text" lazy/> <div>{{text}}</div>

<input type="text" v-model="text" number/> <div>{{text}}</div> <div>{{typeof text}}</div>

<input type="text" v-model="text" debounce="1000"/> <div>{{text}}</div>