v-model

As you’ve probably seen with native forms, this form tag has a lot of input in it.

<form>  </form>

Copy the code

Can Vue make the form’s data change? Sure, we learned a directive that binds the contents of the input field to the V-Model

At the end of the day, we said that v-Model can also bind a lot of value related element tags. In the form form, checkboxes, input fields, radio and multiple options, etc., can be dynamically bound using V-Model.

Consider the following example: The V-Model uses a Textarea in a multi-line text box

Consider this example: V-Model uses checkbox in single, checkbox

This example: V-Model applies radio to the selection box

As you can see, after the binding, the variable stores the value of the input

Example: Use select for the V-Model drop-down list

As you can see, v-mode is written in the select tag and stores the value of the option suboption

The modifier

V-mode and V-ON also have modifiers.

Usage: V-model. modifier = ‘variable name’

Lazy modifier:.lazy

You can make the input field sync when the value changes, rather than just clicking on it and starting to sync every time. This is obviously better performance.

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

Convert the integer modifier to.number

The input can be converted to a variable in the Vue constructor.

Automatic filter closing space:.trim

v-model.trim

Ok, that’s it for this lesson, how about that, doesn’t it feel easy?? Feel simple, immediately pay attention to this public number ~ into the group learning please add V: Qingwanjianhua

This article uses the article synchronization assistant to synchronize