Meet vue.js -------- Awen's vue.js study notes (10) ------ Form input binding

**
New learning and new journey, let us embark on the new long march of learning vue.js together

… … …

Meet vue.js -------- Awen's vue.js study notes (directory)

Pay attention to me, we learn and progress together.

Basic usage

We can use the v-modelinstructions on the form <input>, <textarea>and <select>create two-way data binding on the element. It will automatically select the correct method to update the element based on the control type. And is responsible for monitoring user input events to update data, and perform some special processing on some extreme scenarios.

1. Text

Simple example: two-way data binding of line text
Insert picture description here

2. Multi-line text

Simple example:
Insert picture description here

3. Checkbox

Simple example: check is true, uncheck is equivalent to judge the condition as false
Insert picture description here

4. Radio buttons

Simple example:
Insert picture description here

5. Select box

Simple example: Insert picture description here

Note:
(1) v-modelThe initial values of the value, checked, and selected attributes of all form elements are ignored, and the data of the Vue instance is always used as the data source. So we need a component by JavaScript datadeclared initial value data.
(2) Interpolation () in the text area <textarea>{ {text}}</textarea>will not take effect, and v-model should be used instead.

Modifier

1、`.lazy`

Generally, by default, v-modelthe value of the input box is synchronized with the data after each input event is triggered. But we can add .lazymodifiers, which change into after the event _ _ then synchronize (you can also be understood as information is no longer with us to change the synchronization input box, but when we complete the input box, lost in the input box After focusing, synchronize the information between the two)

Simple example:
Insert picture description here

2、`.number`

We v-modeladded later .numbercan be achieved automatically after the value we enter into numeric type

3、`.trim`

.trim Used to automatically filter the first and last blank characters we input,

Simple example; in this way, if you tell him to print out on our console, you will find that there are many spaces in front,
Insert picture description here
but .trimafter joining , it will be automatically filtered out

**
Follow the campus official account, reply to the web front end to receive 50G front-end learning materials for free One, let's learn and make progress together.

**