表单绑定

表单输入绑定

v-model指定可以实现表单值与属性的双相绑定。即表单元素中更改勒值会自动地更新属性中地值，属性中的值更新勒会自动更新表单中的值。
绑定的属性和事件：
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

1. text和textarea 元素使用value属性和input事件。
2. checkbox和radio使用checked属性和change事件。
3. select字段将value作为prop并将change作为事件。
   表单元素绑定：
   文本框：

 <div id="app">        
       <!-- <input type="text" v-model:value="message" placeholder="请输入。。。"> -->
        <p>输入的内容是：{{message}}</p>
 </div>
 <script>    
      new Vue({       
           el: "#app",        
           data:{            
                  message:"",            
                  }    
        })
</script>

文本域

<!-- <textarea name="" v-model:value="message" cols="30" rows="10"></textarea> -->
        <p>输入的内容是：{{message}}</p>

复选框：

 <input type="checkbox" value="Jack" v-model="checkedNames">       
 <label for="Jack">Jack</label>       
 <input type="checkbox" value="John" v-model="checkedNames">       
 <label for="Jack">John</label>       
 <input type="checkbox" value="Mike" v-model="checkedNames">       
 <label for="Jack">Mike</label>       <br>       
 <span>Checked names: {{ checkedNames}}</span>

<script>   
    new Vue({        
         el: "#app",       
        data:{                      
            checkedNames: []       
             }    
       })
 </script>

单选框：

<input type="radio" value="男" v-model="gender">        
<label>男</label>        
<br>        
<input type="radio" value="女" v-model="gender">        
<label>女</label>        
<br>        
<span>Picked: {{gender}}</span>
<script>    
   new Vue({       
       el: "#app",        
       data:{
             gender: ""
             }
       }
 })
 </script>

下拉框：

 <select v-model="selected">            
       <option disabled value="">请选择</option>            
       <option value="1">A</option>            
       <option>B</option>            
       <option>C</option>        
 </select>        
 <span>Selected: {{selected}}</span>

selected:''

修饰符：
.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据同步（除了上述输入法组合文字时，你可以添加lazy修饰符，从而转变为使用change事件进行同步

<!-- <input type="text" v-model:value.lazy="message" placeholder="请输入。。。"> -->        
<input type="text" v-model.lazy="message" placeholder="请输入。。。>
 <p>输入的内容是：{{message}}</p> 

.number
如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符

 <input type="text" v-model.number="number">

 number: 0
 

.trim
如果要自动过滤用户输入的首尾空白字符，可以给v-model 添加trim修饰符

 <input type="text" v-model="mesg">        
 <p>{{mesg}}</p>
  mesg: ""