本文详细介绍了Vue.js中的双向数据绑定概念，它使得数据变化时视图自动更新，视图改变时数据也同步更新，简化了表单处理。通过v-model指令，可以在input、textarea、select等元素上实现这一功能。文中列举了单行文本、多行文本、选择框和下拉框的双向数据绑定示例，并强调v-model会忽略表单元素的默认值，直接由Vue实例的数据控制。
5.Vue双向数据绑定
什么是双向数据绑定
Vue.js是一个MVVM框架，数据发生变化的时候，视图也发生变化。视图发生变化，数据也会同步变化 双向数据绑定针对于UI组件
双向数据绑定的好处
在Vue.js中，如果使用vuex，实际上数据还是单向的。但是对于UI控件来说，是数据双向绑定的，因此对于表单可以使用双向数据绑定来降低开发难度。
在表单中使用双向数据绑定
使用v-model指令在表单input 、textarea 、select等元素上创建双向数据绑定 ，将会根据控件的类型自动选取正确的方法来更新元素 。
v-model会忽略所有表单元素的默认初始值而是以Vue实例的数据为数据来源，因此需要为vue实例的data设定值
具体使用
单行文本
输入输入框的文字会同步输出到之后的span中
<body>
<div id="app">
<!--绑定v-model为message-->
输入 ： <input type="text" v-model="message"> <span>{{message}}</span> <!--同步输出输入的message-->
<!--实际上在输出的时候，不仅仅改变了DOM的值，也改变了vm实例-->
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
message : "" //初始设定message='' input的v-model初始值也为空
}
})
</script>
</body>
多行文本
<body>
<div id="app">
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> {{message}}
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
message : ""
}
})
</script>
</body>
选择框
<body>
<div id="app">
<input name="gender" type="radio" value="男" v-model="message">男</input>
<input name="gender" type="radio" value="女" v-model="message">女</input>
<br/>
{{message}}
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
message : ""
}
})
</script>
</body>
v-model绑定下的message同样可以直接取到数据
下拉框
<body>
<div id="app">
<select name="letter" v-model="message">
<option value="" disabled>--请选择--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br/>
{{message}}
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
message : ""
}
})
</script>
</body>
即绑定了v-model之后 ，原有DOM的value就没用了，value直接由vue实例的对象来操作
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
