Vue.js(6)：表单输入控件的绑定

　　Vue.js中的v-model双向数据绑定使用起来很方便。在用户操作控件时提取数据，并可以根据程序处理后的数据实时更新控件。

　　练习代码：

    
    
    
    Vue.js-表单输入绑定
    
    
    .table {
        border: 1px solid #ddd;
        border-collapse: collapse;
    }        
    .table tr td{
        text-align:center;
        border:1px rgb(23, 23, 61) solid;
        border-collapse: collapse;
    }        
    


    

        Vue.js中的表单控件的绑定
        
            
                序号控件类型数据同步说明
            
            
                1
{{singleLineText}}
单行文本框
            
            
                2
{{multiLineText}}
多行文本框
            
            
                3
                
                    是
                    否
                
                
{{radioText}}
单选
            
            
            
                4
{{singleSelectText}}
单选框
            
            
                5
                
                    语文
                    数学
                    英语
                
                
{{multiSelectText}}
多选框
            
            
                6
                
                    
                        语文
                        数学
                        英语
                    
                
                
{{dropDownselectBox}}
下拉单选框
            
            
                7
                
                    
                        学习语文
                        学习数学
                        学习英语
                    
                
                
{{multiSelectBox}}
多选框(按ctrl键多选)
            
        
    
    
        //数据
        const VueDataObj={
            singleLineText:'',
            multiLineText:'',
            singleSelectText:true,
            multiSelectText:['语文'],
            radioText:'是',
            dropDownselectBox:'语文',
            multiSelectBox:['学习语文'],
        };
        //方法
        var methods={};
        //计算属性
        var computed={};
        //监听
        var watch={};
        //Vue应用对象
        var vm=new Vue({
           el:'#demo',
           data:VueDataObj,
           methods,
           computed,
           watch,
       })
   

　　页面：