通过前面的介绍我们已经了解了Vue中的基本指令，比如v-cloak,v-text,v-html,v-bind,v-on等指令的作用，以及介绍了MVVM的模式，那么怎么实现动态的在M和V之间数据传递呢，本文我们就来介绍下v-model这个非常有用的指令

v-model指令介绍

v-bind指令的使用

  前面的文章中我们已经介绍过了v-bind指令，该指令可以获取vue对象中的数据，但是这个指令只能实现 M 到V的数据传递，反过来实现不了，如下:

    
    
    
    
    


    
        信息:
    
    

演示M修改数据后，V的数据会同步修改:

在这里插入图片描述

但是V的数据修改后M的数据并不会修改

在这里插入图片描述

v-model指令的使用

  而v-model指令可以实现双向的同步，如下:

    
    
    
    
    


    
        信息:
    
    

在这里插入图片描述

通过上面的图片可以看出数据是双向的在V和M间同步的

简易计算器实现

  利用我们讲的v-model指令来实现一个简单的计算器效果。代码如下:

  
  
  
  
  



  
    

    
      +
      -
      *
      /
    

    

    

    
  

  

效果如下:

在这里插入图片描述

因为实现比较简单，就不过多赘述了~