介绍
v-model 指令，在 表单控件 或者 组件 上创建 双向绑定
底层原理： 使用 v-bind绑定属性， v-on绑定事件
官网：https://cn.vuejs.org/v2/guide/forms.html
例子：输入框
<div id="app">
<div>{{msg}}</div>
<input type="text" v-model="msg" >
<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var app = new Vue({
el: '#app',
data:{
msg:"hello"
}
})
</script>
测试
- 修改输入框的内容
- 在控制台中输入：
app.msg查看msg的值
这就是 MVVM ，model 会影响 view 数据显示， view会改变model
添加人员表单
<div id="app">
<div>姓名：<input type="text" v-model="form.name" ></div>
<div>年龄：<input type="number" v-model.number="form.age" >（属性是number类型，否则为字符串类型）</div>
<div>性别：
<input type="radio" value="0" v-model="form.sex">女
<input type="radio" value="1" v-model="form.sex">男（必须有value值，否则获取的结果不正确）
</div>
<div>民族：
<select v-model="form.minzu">
<option value="-1">请选择</option>
<option value="han">汉族</option>
<option value="man">满族</option>
</select>
</div>
<div>爱好：
<input type="checkbox" value="bc" v-model="form.enjoy">学编程
<input type="checkbox" value="wzry" v-model="form.enjoy">王者荣耀
<input type="checkbox" value="cj" v-model="form.enjoy">吃鸡
<input type="checkbox" value="dy" v-model="form.enjoy">刷抖音
（必须有value值，否则获取的结果不正确）
</div>
<div>
一句话介绍：<textarea标签 v-model="form.descrip" cols="30" rows="10"></textarea标签>
</div>
<input type="button" value="提交" @click="doSubmit()">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
form:{
name:"",
age:undefined, //设置成undefined，页面不会显示
minzu:"-1",
sex:"1",
enjoy:["bc"],//多选按钮的属性一般为数组，否则无法获取选中控件的值
descrip:""
}
},
methods:{
doSubmit:function(){
//if(this.form.age == undefined) this.form.age = 0
console.log("表单控件值:"+JSON.stringify(this.form))
}
}
})
</script>