2020-04-23 v-model

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>