Form input binding
Basic usage
text
<input v-model:"msg" placeholder="edit me"/>
### Multi-line text
<textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea>
### Check box
Hobby
<input type="checkbox" value="See a movie" v-model="checked"/>
<input type="checkbox" value="Play the game" v-model="checked"/>
<input type="checkbox" value="music" v-model="checked"/>
{{ checked }}
var vm=new Vue({
el:'#app',
date:{
checked:[]
},
Radio button
gender
<input type="radio" value="male" v-model="picked"/>male
<input type="radio" value="female" v-model="picked"/>female
{{picked}}
var vm=new Vue({
el:'#app',
date:{
picked: ''
},
Select List
Single choice list
Household registration
<select v-model="selected">
<option disabled value="">Please select</option>
<option>Hebei</option>
<option>Shanxi</option>
<option>Beijing</option>
</select>
{{ selected }}
var vm=new Vue({
el:'#app',
date:{
selected:'',
},
Multiple-select list (binding to an array):
<div >
<select v-model="selected" multiple style="width: 50px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
Bind value
For radio buttons, checkboxes and select list options, the value bound by v-model is usually a static string (a logical value for checkboxes):
<!-- When selected，`picked` as a string "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` for true or false --> <input type="checkbox" v-model="toggle"> <!-- When selected，`selected` as a string "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
Check box
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b" > // When selected === // When not selected ===
Radio button
<input type="radio" v-model="pick" v-bind:value="a"> // When selected ===
Select List Settings
<select v-model="selected">
<!-- Inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// When selectedtypeof // => 'object'
// => 123
Modifier
.lazy
By default, v-model synchronizes the input box's value with data in the input event (except the IME section above), but you can add a modifier lazy to synchronize in the change event:
{{msg}}
<input type="text" :"msg"/>
.number
If you want to automatically convert the user's input value to the Number type, you can add a modifier number to v-model to process the input value:
{{num1}}
<input type="text" :"num1"/>
{{num2}}
<input type="text" :"num2"/>
{{num1+num2}}
var vm=new Vue({
date:{
num1:1,
num2:1
},
});
.trim
If you want to automatically filter the beginning and end spaces of user input, you can add the trim modifier to filter the input on v-model:
{{msg}}
<input type="text" :"msg"/>
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.