1. 引言
通过前面的章节，我们已经学会了vue的事件绑定，有兴趣的同学可以参阅下：
- 《Vue系列教程（01）- 前端发展史》
- 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
- 《Vue系列教程（03）- Vue开发利器VsCode》
- 《Vue系列教程（04）- VsCode断点调试》
- 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
- 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
- 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
- 《Vue系列教程（08）- 基本语法》
- 《Vue系列教程（09）- 事件绑定》
本文主要讲的是Model的数据 双向 绑定 。
2. Model数据双向绑定
在前面，我们知道Vue.js是一个MVVM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化。
当然，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
简单的说，就是可以使用Vue里面的v-model指令声明在标签中，当标签中的值发生改变，Vue里面的model值也会发生改变。
接下来举些例子。
3. 表单示例
3.1 单行文本
示例代码：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> 输入的文本： <label> <input type="text" v-model="message" value="hello"> </label>{{message}} </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { message: "" } }); </script> </body> </html>
启动程序，在文本框里输入内容，可以看到后面的值也会随着变化：
当然，我们控制台里也是可以修改message里的值的：
这就是所谓的Model数据内容双向绑定了。既可以通过视图来修改Model，也可以通过修改Model来控制视图，妙哉！
接下来讲解表单的几种典型的写法，大同小异便不再详述。
3.2 多行文本
示例代码：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> 多行文本：<textarea v-model="message"></textarea> 多行文本是：{{message}} </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { message: "Hello hello!" } }); </script> </body> </html>
启动后，内容如下：
3.3 单选框
示例代码：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> 单选框： <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{checked}}</label> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { checked: false } }); </script> </body> </html>
启动程序后，效果如下：
3.4 复选框
示例代码：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> 多选框： <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label>Jack</label> <input type="checkbox" id="join" value="Join" v-model="checkedNames"> <label>Join</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label>Mike</label> <span>选中的值：{{checkedNames}}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { checkedNames: [] } }); </script> </body> </html>
效果图如下：
3.5 单选按钮
示例代码：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> 单选框按钮 <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <span>选中的值：{{picked}}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { picked: 'Two' } }); </script> </body> </html>
效果如下：
3.6 下拉框
示例代码：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> 下拉框: <label> <select v-model="pan"> <option value="" disabled>---请选择---</option> <option>A</option> <option>B</option> <option>C</option> <option>D</option> </select> </label> <span>value:{{pan}}</span> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { pan: "A" } }); </script> </body> </html>
效果如下：
本文完！
