Vue基础之表单应用

一，可以用 v-model 指令在表单控件元素上创建双向数据绑定

    案例1：

 

        
input 元素：
        
        
消息是: {{message}}
            
        
textarea 元素：
        
{{messageTwo}}
        
    


    

  

  二，复选框：如果是一个为逻辑值，如果是多个则绑定到同一个数组

        案例：

        
单个复选框：
        
        {{message}}

        
多个复选框：
        
        小白猫
        
        小黑猫
        
        小花猫
        

        选择的猫猫为: {{checkedCat}}
    
    

  三，单选按钮：

       案例：

 

        
        小白猫
        
        小黑猫
        

        选择的值为: {{cat}}
    
    

 

 四，select 列表：

    下拉列表的双向数据绑定案例：

        
            选择一个城市
            北京
            上海
            广州
          
          
您选择的城市是：{{selected}}
    
    

 

  案例一：实现城市联动：

 

        省份：
        
            
                请选择
            
            
                {{p}}
            
        
        城市：
        
            
                请选择
            
            
                {{c}}
            
        

    
   

案例二：实现全选反选：

        
全选：
        
        {{checked}}
        

        
        小白猫
        
        小黑猫
        
        小花猫
        

        选择的猫猫为: {{checkedCat}}
    
    

 

案例三：实现表单输入显示提交：

 

        昵称：
        
        

        年龄：
        
        

        单身：
        
        {{checked}}
        

        喜欢：
        
        小白猫
        
        小黑猫
        
        小花猫
        

        
        

        

        昵称: {{ username }}
        

        年龄: {{ age }}
        

        单身: {{ checked }}
        

        喜欢: {{ checkedCat }}