一：什么是v-model？
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
二：原理
v-model其实是一个语法糖
背后包含两个操作
v-bind动态绑定一个value属性
v-on给当前元素绑定input事件
也就是说以下两段代码等价
<input type="text" v-model="message">
<!--等同于下面-->
<input type="text"
v-bind:value="message"
v-on:input="message=$event.target.value">
具体·例子如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-model="变量" 实现双向数据绑定
给表单元素，增加v-model 表单的值变化，变量也会有变化 。变量有变化，表单的值也会有变化
-->
<input type="text" v-model="msg">
{{msg}}
<button v-on:click="change()">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
},
methods:{
change(){
// 修改msg的值
this.msg=this.msg+'阿'
}
}
})
</script>
</body>
</html>
三：使用方法+注意事项
v-model 本质上不过是语法糖，
可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
