Vue.js之表单的基本操作

本文主要介绍如何利用Vue.js进行表单的基本操作，核心是利用v-model对各个表单的元素值进行双向绑定。效果如图：

文本框即是上面的姓名框,通过给文本框双向绑定name变量，即可实现效果。

单选按钮即为上面的性别选项，由于单选按钮仅需选择一个选项，故定义的gender变量以单个数据进行赋值。为所有的相应单选按钮的值双向绑定gender变量

多选按钮即为上面的爱好选项，由于多选按钮可以选择多个选项，故定义的hobby变量以数组的形式进行赋值。为所有的相应多选按钮双向绑定hobby变量。

下拉选项同时具有单选按钮和多选按钮的特点。当select下拉框的multiple属性为false时，此时类似于单选按钮，定义的career变量以单个数据进行赋值。当multiple的属性为true时，此时类似于多选按钮，定义的career变量以数组的形式进行赋值。注意：只需为select双向绑定career变量即可。

文本域同文本框类似，通过给文本域双向绑定description变量即可。

    
    
    
    
    



    
        

            姓名： 
            
                性别：
                
                男
                
                女
            
            
                爱好：

                
                篮球

                
                唱歌

                
                写代码
            
            
                职业：
                
                    请选择职业
                    教师
                    学生
                    工人
                
            
            
                个人简介：
                
            

            
        

        
            姓名： 
            性别： 
            爱好： 
            职业： 
            简介：