Vue.js中提供 v-model 的指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例 vm 中对应的属性值也同时更新，反之亦然。本小节介绍主要input元素绑定v-model 后的具体用法和处理方式，实例所依赖的js代码如下：

    
             
                       
     
        
      
            
       
                
        
1. Text 输入框示例
                
                        
        Your input is : {
   { message }}            
       
            
       
                
        
2. Radio 单选框示例
                
                        
        Runoob                
        
                
                        
        Google                
        
                
        选中值为: {
   { picked }}                
                    
       
            
       
                
        
3.Checkbox 
                
        
Checkbox 分两种情况：单个勾选和多个勾选框
                
        
单个勾选框：v-model即为布尔值，此时input的value并不影响v-model的值
                
                        
        checked:{
   { checked }}                
        
多个勾选框：v-model使用相同的属性名称，此属性为数组
                
        1                
        2                
        3                
        4                
        5                
        6                
        
MultiChecked : {
   { multiChecked.join(',') }}
            
       
            
       
                
        
4. Select
                
        
Select 分两种情况：单选和多选，多选的时候需要绑定到一个数组
                
        
单选：
                
                            A                    B                    C                                
        Selected: {
   { selected }}                
        
多选：
                
                            A                    B                    C                    D                    E                    F                                
        Selected: {
   { multiSelected }}