<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的值應(yīng)該被注冊(cè)到data里面，否則會(huì)紅字警告（事實(shí)上，所有的都應(yīng)該也這么做）</div> 
<div>——————————————</div> 
<select v-model="select"> 
<option>默認(rèn)值，option不設(shè)value</option> 
<option value="B">value的值設(shè)為B</option> 
<option selected value="C">默認(rèn)選擇這個(gè)，value設(shè)為C</option> 
</select> 
<div>{{select}}</div> 
<div>同樣，這里不注冊(cè)也會(huì)被報(bào)錯(cuò)</div> 
<div>——————————————</div> 
<div>以下是select的多選，按住ctrl可以連續(xù)選，按住shift選擇區(qū)間</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>注意，這個(gè)多選select框是默認(rèn)帶y軸的滾動(dòng)條的</div> 
<div>——————————————</div> 
<div>動(dòng)態(tài)渲染，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那么樣，用一個(gè)數(shù)組作為多個(gè)checkbox的v-model的變量，且其值是綁定與vm實(shí)例的某個(gè)屬性； 
因此，不能在v-bind里的值是一個(gè)字符串，但可以是一個(gè)對(duì)象，例如{a:1}這樣（當(dāng)然，這個(gè)時(shí)候顯示的值也是一個(gè)對(duì)象了） 
</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的一個(gè)屬性或者是一個(gè)對(duì)象，另外，同樣有效的還有select。（主要就這三個(gè)有選中狀態(tài)，除此之外雖然例如Date類型也有選中，但是意義不大）</div> 
<div>——————————————</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
text: "默認(rèn)有輸入內(nèi)容", 
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>