本文共 898 字，大约阅读时间需要 2 分钟。

v-model 指令的基础用法

v-model 是 Vue.js 中最常用的双向绑定指令，用于在表单元素（如 input、textarea、select）上创建数据与视图的两向绑定。它不仅能监听用户的输入事件，还能自动将输入值更新到 Vue 实例中的数据属性。

v-model 在不同输入类型中的应用

v-model 根据输入元素的类型，会自动使用不同的属性和事件进行绑定：

• text 和 textarea：使用 value 属性和 input 事件。
• checkbox 和 radio：使用 checked 属性和 change 事件。
• select：使用 value 属性和 change 事件。

v-model 在文本输入中的应用示例

   
  
      
    
当前输入内容：{{ message }}
   

单选框的绑定示例

   
  
    男  
    女  
    当前选择：{{ message }}
   

复选框的绑定示例

   
  
    
爱好
  
    足球  
    阅读  
    音乐  
    当前选择：{{ message }}
   

选择框的绑定示例

   
  
        请选择    A    B    C    
    Selected: {{ selected }}
   

v-model 的值绑定

对于单选框、复选框和选择框，v-model 通常绑定的值是静态的字符串（复选框也可以是布尔值）：

• 单选按钮：<input type="radio" v-model="picked" value="a">
• 复选框：<input type="checkbox" v-model="toggle">
• 选择框：<select v-model="selected">

当需要将值绑定到 Vue 实例的一个动态属性时，可以使用 v-bind：

  123

v-model 的修饰符

.lazy

设置 lazy 修饰符后，数据不会实时更新，适用于 input 元素：

.number

自动将用户输入的值转为数值类型：

.trim

自动过滤输入的首尾空白字符：