Vue provides V-model directives for bidirectional binding on form class elements

Can be used for input, textarea, etc. The actual value depends only on the bound data, regardless of the initial inserted value

<input type="text" v-model="value"> data:{value: "}Copy the code
// text v-model="text" > data:{text: ""}Copy the code
<input type="radio" V-bind :checked="oneradio"> data:{oneradio: false}Copy the code

If it is used in combination, v-model needs to be used together with value. Bind the value of the selected single box, and the initial value of the binding can be arbitrarily given

<input type="radio" name="one" value= "vmodel" ="check"> <input type="radio" name="one" value=" "v-model="check"> <input type="radio" name="one" value=" one" v-model="check"> {{check}} < / div > / / introduction of the vue < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script > new vue ({ El: '# app' data: {can check: '/ / string | | array}}) < / script > < / body >Copy the code
Checkbox checkbox true | false Boolean value
<input type="checkbox" V-bind :checked="checkboxs"> new Vue({el:'#app', data:{checkboxs:true // Boolean}})Copy the code

Multiple checkboxes can only be arrays

If used in combination, the v-Model is used in conjunction with the value. The V-Model binds to an array, and if it binds to a string, it converts to true and false corresponding to the checked property of the bound check box

<div> <input type="checkbox" value=" checkboxs" V-model ="checkboxs"> <input type="checkbox" value=" checkbox" V-model ="checkboxs"> {{checkboxs}} < / div > new Vue ({el: '# app, data: {checkboxs: [] / / only array}})Copy the code

Select the drop-down box

If there is a single value, the bound value is initialized as an array or a string. If there is a value, the value is matched first. If there is no value, the value is matched as text

Select V-model ="selects" > <option value=" selects" > <option value=" selects" </option> <option value=" selects" </option> </select> {{selects}} new Vue({data:{selects:[] // selects:[])Copy the code

Multiple drop-down boxes multiple

If multiple selection is required, v-model is used with value, and v-Model binds an array, similar to check boxes

<select V-model ="selects" multiple > <option value=" multiple "> </option> <option value=" multiple" </option> </option> </select> {{selects}} new Vue({data:{selects:[] // selects:[])Copy the code

Note:

1. If it is a single box, it is best to initialize the value as a string “” 2. If it is a multiple box, it is best to initialize the value as an array [] 3

The radio button

<input type="checkbox" v-model="radios" v-bind:value="one"> new Vue({ data:{ radios:true, One :'123'}}) // Just use v-bind to bind a value to the checkbox, and the v-model will bind its valueCopy the code