一开始，把model层里面对应的数据赋值给v-model绑定的数据，当view层触发一些时间使绑定的数据发生变化后，model层的数据也会发生变化。
5.1 输入框应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
输入的文本：<input type="text" v-model="mes" />{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "lucky",
},
})
</script>
</body>
</html>运行结果：一开始把model层的"lucky"转给输入框，在打开页面时，输入框显示的是"lucky"。当view层发生变化时，输入的数据就会传给mes，使model层的数据也发生变化。
5.2 多行文本控件应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<textarea v-model="mes"></textarea>{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "lucky",
},
})
</script>
</body>
</html>运行结果：
5.3 单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
性别：
<input type="radio" value="男" v-model="mes" />男
<input type="radio" value="女" v-model="mes"/>女
<hr/>
性别：{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "222",
},
})
</script>
</body>
</html>运行结果：先从model层开始，mes数据是222，然后绑定给每个单选框，如果单选框本身的value也等于222，这个单选框就会变成选中状态！view层，如果有人点击了value为"男"的单选框，就会把"男"这个value传给mes，model层的mes也会跟着变化。
5.4 下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<select v-model="mes">
<option value="" disabled>请选择</option> <!-- disabled表示该选项被禁用-->
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<hr />
value:{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: '',
},
})
</script>
</body>
</html>运行结果：
PS:如果mes的初始值是A，访问页面的时候，下拉框就会自动选择到A上。因为，在绑定后，如果model层的数据初始值和view层是一样的就相当于选择了这个选项。