Vue学习之v-model指令

v-model指令介绍

v-bind指令的使用

v-bind指令，该指令可以获取vue对象中的数据，但是这个指令只能实现 M 到V的数据传递，反过来实现不了，如下:

    
    
    
    
    


    

        信息:
    
    

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

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

v-model指令的使用

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

    
    
    
    
    


    

        信息:
    
    

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

简易计算器实现

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

  
  
  
  
  



  

    

    
      +
      -
      *
      /
    

    

    

    
  

  

效果如下: