vue 第六天 表单控件绑定

1、普通text类型的表单绑定

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


new Vue({
    data(){
        return {
            name: ''
        }
    }
}).$mount('#app');

2、checkbox绑定

单个checkbox

<input type="checkbox" v-model="checked" id="checkbox">
<label for="checkbox">{{checked}}</label>


new Vue({
    data(){
        return {
            checked: false
        }
    }
}).$mount('#app');

 

多个checkbox，可以使用数组来接收绑定值

<input type="checkbox" value="西瓜" v-model="checkedName" >  西瓜 
<input type="checkbox" value="番茄" v-model="checkedName" >  番茄 
<input type="checkbox" value="苹果" v-model="checkedName" >  苹果 
<input type="checkbox" value="香蕉" v-model="checkedName" >  香蕉 
                                                              
<p>选中的水果：{{checkedName}}</p> 


new Vue({                  
    data(){                
        return {           
            checkedName: []
        }                  
    }                      
}).$mount('#app');                                          

3、radio单选框

 

<input type="radio" value="男" v-model="picked" id="man">  
<label for="man">男</label>                                
<input type="radio" value="女" v-model="picked" id="woman">
<label for="woman">女</label>                              
<p>选中的性别：{{picked}}</p>                                   


new Vue({               
    data(){             
        return {        
            picked: ''  
        }               
    }                   
}).$mount('#app');      

 

4、下拉选择

单选

<select v-model="selected">  
    <option>广东省</option>     
    <option>江西省</option>     
    <option>湖南省</option>     
    <option>湖北省</option>     
</select>                    
<p>选中的省份：{{selected}}</p>    


new Vue({                 
    data(){               
        return {          
            selected: ''  
        }                 
    }                     
}).$mount('#app');        

 

多选，绑定到数组

 

 

<select v-model="selected" multiple>
    <option>广东省</option>            
    <option>江西省</option>            
    <option>湖南省</option>            
    <option>湖北省</option>            
</select>                           
<p>选中的省份：{{selected}}</p>           


new Vue({                      
    data(){                    
        return {               
            selected: []       
        }                      
    }                          
}).$mount('#app');