This article shares the specific code for form control binding for everyone for your reference. The specific content is as follows
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form control binding</title>
</head>
<body>
<!-- v-modelImplement two-way binding of data on form control elements -->
<div >
<input type="text" v-model="message" placeholder="Please enter">
<p>{{message}}</p>
</div>
<!-- Single checkbox -->
<div >
<input type="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<!-- Multiple check boxes are bound to the same array -->
<div >
<input type="checkbox" v-model="checkedNames" value="Jack">
<label for="checkboxjack">Jack</label>
<input type="checkbox" v-model="checkedNames" value="John">
<label for="checkboxJohn">John</label>
<input type="checkbox" v-model="checkedNames" value="Mike">
<label for="checkboxMike">Mike</label>
<span>I am{{checkedNames}}</span>
</div>
<!-- Radio box -->
<div >
<input type="radio" value="man" v-model="sex">
<label for="man">man</label>
<input type="radio" value="woman" v-model="sex">
<label for="woman">woman</label>
<span>When selected,{{sex}}</span>
</div>
<!-- Single choice list -->
<div >
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>I am{{selected}}</span>
</div>
<!-- Multiple selection list Bind to an array-->
<div >
<select v-model='selected' multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>I chose{{selected}}</span>
</div>
<!-- Dynamic optionsv-forRendering passv-bindBindvalue-->
<div >
<select v-model='selected'>
<option v-for="item in items" v-bind:value="">
{{}}
</option>
</select>
<!-- v-modelThe latterselectedMust appear indatamiddle -->
<span>The selected is{{selected}}</span>
</div>
<!-- By default， v-model exist input 事件middle同步输入框的值与数据，But you can add a modifier lazy ，从而转变为exist change 事件middle同步： -->
<!-- exist "change" Instead "input" 事件middle更新 -->
<input ="msg" >
<!-- If you want to automatically convert the user's input value to Number type（If the conversion result of the original value is NaN Return to the original value），A modifier can be added number Give v-model To process input values： -->
<input ="age" type="number">
<!-- This is usually very useful，因为exist type="number" hour HTML middle输入的值也总是会返回字符串type。.trimIf you want to automatically filter the beginning and end spaces entered by the user，Can be added.trim Modifier to v-model Filter input： -->
<input ="msg">
<script src="js/"></script>
<script src="js/"></script>
</body>
</html>
js:
var app1=new Vue({
el:'#app-1',
data:{
message:'start'
}
});
var app2=new Vue({
el:'#app-2',
data:{
checked:false
}
});
var app3=new Vue({
el:'#app-3',
data:{
checkedNames:[]
}
});
var app4=new Vue({
el:'#app-4',
data:{
sex:''
}
});
var app5=new Vue({
el:'#app-5',
data:{
selected:''
}
});
var app6=new Vue({
el:'#app-6',
data:{
selected:[]
}
});
var app7=new Vue({
el:'#app-7',
data:{
selected: 'A',
items:[
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.