Vue.js- forms and v-model

Learning notes:Forms and v-model

Forms and v-model

Vue.js providedv-modelInstruction to bind data bidirectionally on form class elements.

Usev-modelAfter that, the value displayed by the form control only depends on the bound data, and no longer cares about the value displayed during initializationvalueProperty, for the<textarea></textarea>The value inserted between will not take effect.

Usev-modelWhen inputting Chinese with Chinese input method, the data will not be updated in Vue until no phrase is selected, that is, in pinyin phase, and the update will only be triggered when the Chinese character is typed.

If you want to always update in real time, you can use the@inputSubstitutev-model. In fact,v-modelIt is also a special grammatical sugar, but it will be intelligently processed on different forms.

Radio button

Radio buttons do not need to be used alone.v-modelFor direct usev-bindWhen you are a Boolean value, select it if it is true and not if it is no.

<div id="app">
    <input type="radio" :checked="picked" id="radio">
    <label for="radio">单选按钮</label>
</div>

If it is used in combination to achieve the effect of mutually exclusive selection, it is necessary tov-modelcoordinatevalueTo use.


<div id="app">
    <p>
        <input type="radio" v-model="picked" value="html" id="html">
        <label for="html">HTML</label>
    </p>
    <p>
        <input type="radio" v-model="picked" value="js" id="js">
        <label for="js">JavaScript</label>
    </p>
    <p>
        <input type="radio" v-model="picked" value="css" id="css">
        <label for="css">CSS</label>
    </p>
    <p>选择的项:{{picked}}</p>
</div>

Check box

When the check box is used alone, it is also usedv-modelBind a boolean value.

When used in combination, it is also truev-modelAndvalueTogether, multiple check boxes are bound to data of the same array type.valueIf the value of is in the array, this item will be selected. This process is also two-way, when checkedvalueKnowing that will be automaticpushInto this array.

Select list

The selection list is the down selector, which can be divided into single selection and multiple selection.

< option > is an alternative if it containsvalueAttributes,v-modelIt will give priority to matching.valueValue; If not, it will be directly matched.<option>Thetext.

In business,<option>Regular usev-forDynamic output,valueAndtextIt is also usefulv-bindDynamic output.

Binding value

In business, sometimes it is necessary to bind a dynamic data, then you can usev-bindImplementation.

Radio button

<div id="app">
    <input type="radio" v-model="picked" :value="value">
    <p>{{picked}}</p>
    <p>{{value}}</p>
</div>

data: {
    picked: false,
    value: 123
},

When selected,app.picked===app.value, the values are all123.

Check box


<div id="app">
    <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
    <p>{{toggle}}</p>
    <p>{{value1}}</p>
    <p>{{value2}}</p>
</div>

Select list

<div id="app">
    <select v-model="selected">
        <option :value="{number:123}">123</option>
    </select>
    {{selected.number}}
</div>

When elected,app.selectedIs an Object, soapp.selected.number===123.

Modifier

Similar to the modifier of the event,v-modelThere are also modifiers to control the timing of data synchronization.

.lazy

In the input box,v-modelThe default is ininputEvent, using modifiers.lazyWill be transformed intochangeSynchronization in events.

<div id="app">
    <input type="text" v-model.lazy="message">
    <p>{{message}}</p>
</div>

At this time,messageIt does not change in real time, but is updated when out of focus or pressing enter key.

.number

Use modifiers.numberYou can convert the input to Number type, otherwise the input number is actually String, which is more useful when entering numbers.

<div id="app">
    <input type="number" v-model.number="message">
    <p>{{typeof message}}</p>
</div>

.trim

Modifier.trimYou can automatically filter the leading and trailing spaces entered.

<input type="text" v-model.trim="message">