Vue系列教程（10）- Model数据内容双向绑定（v-model）

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>


    
    Title
    
    




    输入的文本：
    
        
    {{message}}




    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });

启动程序，在文本框里输入内容，可以看到后面的值也会随着变化： 当然，我们控制台里也是可以修改message里的值的： 这就是所谓的Model数据内容双向绑定了。既可以通过视图来修改Model，也可以通过修改Model来控制视图，妙哉！

接下来讲解表单的几种典型的写法，大同小异便不再详述。

3.2 多行文本

示例代码：

DOCTYPE html>


    
    Title
    
    




    多行文本：  多行文本是：{{message}}




   var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello hello!"
        }
    });

启动后，内容如下：

3.3 单选框

示例代码：

DOCTYPE html>


    
    Title
    
    




    单选框：
    
      
    {{checked}}




   var vm = new Vue({
        el: "#app",
        data: {
            checked: false
        }
    });

启动程序后，效果如下：

3.4 复选框

示例代码：

DOCTYPE html>


    
    Title
    
    




    多选框：
    
    Jack
    
    Join
    
    Mike
    选中的值：{{checkedNames}}




    var vm = new Vue({
        el: "#app",
        data: {
            checkedNames: []
        }
    });

效果图如下：

3.5 单选按钮

示例代码：

DOCTYPE html>


    
    Title
    
    




    单选框按钮
    
    One
    
    Two
    选中的值：{{picked}}




  var vm = new Vue({
        el: "#app",
        data: {
            picked: 'Two'
        }
    });

效果如下：

3.6 下拉框

示例代码：

DOCTYPE html>


    
    Title
    
    




    下拉框:
    
        
            ---请选择---
            A
            B
            C
            D
        
    
    value:{{pan}}




  var vm = new Vue({
        el: "#app",
        data: {
            pan: "A"
        }
    });

效果如下： 本文完！