1驯镊、 綁定文本輸入框input拂共，綁定 textarea,綁定select， 綁定 多選岛马，綁定單選：
<template>
<div>
//綁定文本輸入框input
<input v-model="msg1" placeholder="姓名"></input><br />
input 框:{{msg1}}<br />
//綁定 textarea
<textarea v-model="msgarea"></textarea><br />
textarea:{{msgarea}}<br />
//綁定select
<select v-model="selectMsg">
? <option value ="volvo">Volvo</option>
? <option value ="saab">Saab</option>
? <option value="opel">Opel</option>
? <option value="audi">Audi</option>
</select><br/>
select: {{selectMsg}}<br />
//綁定 多選
您的業(yè)務愛好收捣？<br /><br />
<label><input name="hobby" type="checkbox" value="1" v-model="hobby"/>看書 </label>
<label><input name="hobby" type="checkbox" value="2" v-model="hobby"/>寫字 </label>
<label><input name="hobby" type="checkbox" value="3" v-model="hobby"/>看電影 </label>
<label><input name="hobby" type="checkbox" value="4" v-model="hobby"/>滑雪 </label>
<label><input name="hobby" type="checkbox" value="5" v-model="hobby"/>唱歌 </label>
業(yè)務愛好：{{hobby}}<br />
//綁定單選
您最喜歡水果届案？<br /><br />
<label><input name="Fruit" type="radio" value="1" v-model="fruit" />蘋果 </label>
<label><input name="Fruit" type="radio" value="2" v-model="fruit"/>桃子 </label>
<label><input name="Fruit" type="radio" value="3" v-model="fruit"/>香蕉 </label>
<label><input name="Fruit" type="radio" value="4" v-model="fruit"/>梨 </label>
<label><input name="Fruit" type="radio" value="5" v-model="fruit"/>其它 </label>
水果：{{fruit}}<br />
//提交時的click 事件綁定
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
? ? ?msg1:''",// 輸入框input的值,初始值為空
? ? ?msgarea:''",// textarea
? ? selectMsg:''",// select 選擇框
? ? hobby:[],// 復選框 checkbox
? ? ?fruit:''"http://? ? 單選radio
};
},
methods:{
submit:function(){
//表單數(shù)據(jù)的對象接收方式
var object={
name:this.msg1,
des:this.msgarea,
car:this.selectMsg,
hobby:this.hobby,
fruit:this.fruit
}
console.log(object);
}
}
}
</script>
<style>
</style>
