Vue3 form

Today we’ll learn that we can use the V-model directive to create two-way data binding on elements such as forms ,

The V-Model automatically selects the correct method to update the element based on the control type.

V-model ignores the initial values of the value, Checked, and selected attributes of all form elements and uses the initial values declared in the Data option.

The V-Model internally uses different attributes for different input elements and throws different events:

  • Text and Textarea elements are usedvalueProperties andinputEvents;
  • Checkbox and radio usecheckedProperties andchangeEvents;
  • The select field willvalueAs an attribute and willchangeAs the event

Input box

Two-way data binding using the V-Model for input and Textarea elements is demonstrated in this example:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script SRC ="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <p>input </p> < INPUT V-model ="message" placeholder=" placeholder" > <p>input form message: {{message}}</p> <p> Textarea element: </p> < Textarea V-model ="message2" placeholder=" multi-line text input..." ></textarea> <p> <p style="white-space: pre">{{ message2 }}</p> </div> <script> const app = { data() { return { message: '', message2: 'baidu \ r\nhttps://www.baidu.com}}} Vue. CreateApp (app). The mount (' # app) < / script > < / body > < / HTML >Copy the code

Textarea interpolation does not work in the textarea and needs to be v-model instead:

<! <textarea>{{text}}</textarea> <! <textarea v-model="text"></textarea>Copy the code

Check box

If one check box is a logical value, if multiple check boxes are bound to the same array. Two-way data binding for check boxes is demonstrated in the following example:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script SRC = "https://unpkg.com/vue@next" > < / script > < / head > < body > < div id = "app" > < p > a single check box: </p> <input type="checkbox" id="checkbox" V-model ="checked"> <label for="checkbox">{{checked}}</label> <p> Multiple check boxes: </p> <input type="checkbox" id="Baidu" value="Baidu" v-model="checkedNames"> <label for="Baidu">Baidu</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input Type ="checkbox" id="taobao" value=" taobao" V-model ="checkedNames"> <label for="taobao"> </label> <br> <span> {{ checkedNames }}</span> </div> <script> const app = { data() { return { checked : false, checkedNames: [] } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the code

Running results:

The radio button

Two-way data binding for radio buttons is demonstrated in the following example:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <input type="radio" id="baidu" value="Baidu" v-model="picked"> <label for="baidu">Baidu</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for=" Google ">Google</label> <br> <span> {{ picked }}</span> </div> <script> const app = { data() { return { picked : 'Runoob' } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the code

Running results:

The select list

Two-way data binding for drop-down lists is demonstrated in the following example:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <select v-model="selected" name="fruit"> <option value=""> Select a website </option> <option value="www.baidu.com"> Baidu </option> <option Value ="www.google.com">Google</option> </select> <div id="output"> {{selected}} </div> </div> <script> const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the code

Running results:

Multiple selections bind to an array:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <select v-model="selected" name="fruit" multiple> <option value="www.baidu.com">baidu</option> <option value="www.google.com">Google</option> <option Value ="www.taobao.com">Taobao</option> <div id="output"> {{selected}} </div> </div> <script> const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the code

Running results:

Output options using the V-for loop:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Vue test instance </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app" class="demo"> <select v-model="selected"> <option v-for="option in options" :value="option.value"> {{option.text}} </option> </select> <span> {{ selected }}</span> </div> <script> const app = { data() { return { selected: 'www.runoob.com', options: [ { text: 'baidu', value: 'www.baidu.com' }, { text: 'Google', value: 'www.google.com' }, { text: 'Taobao', value: 'www.taobao.com' } ] } } } Vue.createApp(app).mount('#app') </script> </body> </html>Copy the code

Running results:

Value binding

For radio buttons, check boxes, and select box options, the value of the V-model binding is usually a static string (it can also be a Boolean value for check boxes) :

<! - elected, ` picked ` for string "a" -- -- > \ < input type = "radio" v - model = "picked" value = "a" / > \ \ <! -- 'toggle' is true or false -->\ <input type="checkbox" V-model ="toggle" />\ <! <select V-model ="selected"> <option value=" ABC ">ABC</option> </select>Copy the code

But sometimes you might want to bind a value to a dynamic property of the current active instance, using V-bind. Additionally, you can use V-bind to bind an input value to a non-string.

Checkbox:

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" /> ... / / selected vm. Toggle = = = 'yes' / / deselect vm. Toggle = = =' no 'Copy the code

Single box (Radio) :

<input type="radio" V-model ="pick" V-bind :value="a" vm.pick === vm.aCopy the code

Select box options:

<select v-model="selected"> <! --> <option :value="{number: Typeof vm.selected // => 'object' vm.selected. Number // => 123Copy the code

The modifier

.lazy

By default, v-Model synchronizes the values and data of the input field in the input event, but you can change this to synchronize in the change event by adding a lazy modifier:

<! <input v-model. Lazy =" MSG ">Copy the code

.number

If you want to automatically convert the user’s input value to Number (or return the value if the conversion result is NaN), you can add a modifier Number to the V-Model to handle the input value:

<input v-model.number="age" type="number">
Copy the code

This is often useful because the value entered in HTML when type=”number” always returns a string type as well.

.trim

If you want to automatically filter the leading and trailing Spaces of user input, you can add the trim modifier to the V-model to filter the input:

<input v-model.trim="msg">
Copy the code

End of today’s share ——————————-