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 />
//绑定 多选
您的业务爱好？<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>
业务爱好：{{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:''"// 单选radio
};
},
methods:{
submit:function(){
//表单数据的对象接收方式
var object={
name:this.msg1,
des:this.msgarea,
car:this.selectMsg,
hobby:this.hobby,
fruit:this.fruit
}
console.log(object);
}
}
}
</script>
<style>
</style>
