v-model 是 Vue 用于表单元素上创建双向数据绑定，它本质是一个语法糖，在单向数据绑定的基础上，增加了监听用户输入事件并更新数据的功能。
通俗的将就是将某个数据绑定到DOM，当数据发生变化时，Vue将自动刷新DOM。
实例1：下面使用 v-model 指令将 input 和 vue data 中的 message 数据进行绑定。当 input 的值发生变化时，message 的值也将变化。源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 打印消息 -->
<p>{{ message }}</p>
<input v-model="message">
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>实例2：v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 value 设置初始值，运行你会发现结果为 hello world1 -->
<input v-model="message1" placeholder="edit me" value="initial value1" />
<p>Message is: {{ message1 }}</p><br>
<textarea v-model="message2" placeholder="add multiple lines">initial value2</textarea>
<p>Message is: {{ message2 }}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message1: 'hello world1',
message2: 'hello world2'
}
});
</script>
</body>
</html>实例3：使用 v-model 指令实现复选框 checkbox 双向绑定。源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<p>
<!-- 通过点击按钮控制 checkbox 选中或不选中 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label><br/>
<button @click="click1">Change Status</button>
</p>
<p>
<!-- 使用 v-model 绑定到数组中，获取复选框组中每个checkbox的状态（选中/未选中） -->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
checked: false,
checkedNames: []
},
methods: {
click1: function(){
this.checked = !this.checked;
}
}
})
</script>
</body>
</html>实例4：使用 v-model 指令实现复选框 radio 双向绑定。源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<p>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
</p>
<p>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
</p>
<!-- 显示你选中的 radio -->
<span>Picked: {{ picked }}</span>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
</body>
</html>实例5：使用 v-model 指令实现 select 下拉列表双向绑定。源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<p>单选列表：</p>
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<p>多选列表（绑定到一个数组）：</p>
<select v-model="selected2" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected2 }}</span>
<p>动态选项，用 v-for 渲染：</p>
<select v-model="selected3">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected3 }}</span>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected: '',
selected2: [],
selected3: '',
options: [
{text:'name1', value:'1'},
{text:'name2', value:'2'},
{text:'name3', value:'3'},
{text:'name4', value:'4'}
]
}
})
</script>
</body>
</html>v-model 指令修饰符：
（1）.lazy： 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步；
（2）.number： 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值。这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型；
（3）.trim： 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入；
实例：下面将分别演示 .lazy、.number 和 .trim 修饰符的用法。源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
<p>msg = |{{msg}}|</p>
<!-- 自动转换成数字形 -->
<input v-model.number="age" type="number">
<p>age = {{age}}</p>
<!-- 去除首尾的空字符串 -->
<input v-model.trim="msg2">
<p>msg2 = |{{msg2}}|</p>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: '',
age: 10,
msg2: ''
}
})
</script>
</body>
</html>
川公网安备51010802032098
