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

1. v-model指令:

v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源

本文只讨论v-model在普通dom标签上的使用，关于自定义组件的model选项，可以查看

1.1. <input>文本框中使用:

   
    
    name: {  {name}}
    
    
    
    
    
        
    
   

1.2. <textarea>中使用:

使用上和<input>文本框的使用类似

   
    
    Multiline message is:    
    
{  { message }}
    
    
    
    
   

1.3. <input>复选框中使用:

单个复选框时，v-model绑定的值是boolean，复选框勾选时，会改变绑定的值，

   
    
        
    {  {checked}}
    
   

多个复选框时，v-model要绑定数组；勾选时，勾选的值会添加到数组里；取消勾选则移除数组对应的值

   
    
    Jack    
    John    
    Mike
    
    
    Checked names: {  { checkedNames }}
   

1.4. <input>单选框中使用:

勾选时，改变属性值为对应value值

   
    
    One
    
    
    Two
    
    
    Picked: {  { picked }}
   

1.4. <select>选择框中使用:

单选时，绑定字符串；多选时，绑定数组

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

以上例子参考