简介

v-model 是Vue中用于表单控件（如input, textarea等）的一个指令，其本质是一个语法糖。它实现了视图（View）与数据模型（Model）之间的双向绑定。这意味着，当表单控件的值发生变化时，Vue会自动更新相关数据；反之，当数据发生变化时，视图也会自动更新以反映最新数据。

示例

        

          
            
            JavaScript
          
          
            
            
          
        
        

          
12
          <input type="text" v-model="message">
<p>Message is: {{ message }}</p>
        
      

原理

1. 绑定value属性
2. 监听input事件，获取到最新值后赋值给绑定的value属性

        

          
            
            JavaScript
          
          
            
            
          
        
        

          
123
          <input type="text" v-model="message">
{/* 等价于 */}
<input type="text" :value="message" @input="message = $event.target.value">