什么是表單？
就是和input標(biāo)簽以及textarea標(biāo)簽相關(guān)的東西
如何利用vue為表單填充數(shù)據(jù)季蚂？
利用v-model
<div id="app">
<p>input 元素：</p>
<input v-model="message" >
<p>textarea 元素：</p>
<textarea v-model="message2"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '菜鳥(niǎo)教程\r\nhttp://www.runoob.com'
}
})
</script>
就這么簡(jiǎn)單
v-model="message" 中的message就對(duì)應(yīng)著data里面的相應(yīng)信息躏仇。隨便你起什么名字昙衅，不一定要用message有巧，對(duì)應(yīng)上就行。就是說(shuō)v-model后面的值必須和data里面對(duì)應(yīng)芬膝。
image.png
如果input類型為單選框
如下望门，可以通過(guò)v-model來(lái)設(shè)置其值為true或者false。當(dāng)然一般的value屬性這里就不用了锰霜。v-model替代了value屬性筹误。
v-model 會(huì)忽略所有表單元素的 value、checked癣缅、selected 特性的初始值厨剪。
之后再實(shí)例里可以設(shè)置checked為true或者false。
<div id="app">
<p>單個(gè)復(fù)選框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
}
})
</script>
結(jié)果
image.png
或者
image.png
這個(gè)取決于data中checked的布爾值友存。
如果input類型為多選框如下
checkedNames這幾個(gè)字是內(nèi)建的祷膳，不能隨便變。
<div id="app">
<p>多個(gè)復(fù)選框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>選擇的值為: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
結(jié)果選擇相應(yīng)的多選框就會(huì)輸出相應(yīng)的項(xiàng)目名字屡立。 checkedNames: []后面的中括號(hào)必須有（原因直晨？也許因?yàn)槭莻€(gè)數(shù)組？）
image.png
