Vue. js forms control binding required every day, vue. js Form Control

Vue. js forms control binding required every day, vue. js Form Control

Basic usage

You can use the v-model command to create two-way data binding on the Form Control Element. It automatically selects the correct method to update elements based on the control type. Despite the magic, v-model is just a syntactic sugar. It updates data in user input events and handles some extreme examples in particular.

Text

<span>Message is: {{ message }}</span><br><input type="text" v-model="message" placeholder="edit me">

Checkbox

The logical value is as follows:

<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>

Multiple check boxes are bound to the same array:

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames | json }}</span>

new Vue({ el: '...', data: {  checkedNames: [] }})

Radio

<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span>

Select

Single choice:

<select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option></select><span>Selected: {{ selected }}</span>

Multiple selection (bind to an array ):

<select v-model="selected" multiple> <option selected>A</option> <option>B</option> <option>C</option></select><br><span>Selected: {{ selected | json }}</span>

Dynamic options, rendering with v-:

<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value">  {{ option.text }} </option></select><span>Selected: {{ selected }}</span>

new Vue({ el: '...', data: {  selected: 'A',  options: [   { text: 'One', value: 'A' },   { text: 'Two', value: 'B' },   { text: 'Three', value: 'C' }  ] }})

Bind value

For the single-choice button, check box and select box options, the value bound to the v-model is usually a static string (for the selected box, it is a logical value ):

<! -- During the election, 'picked' is the string "a" --> <input type = "radio" v-model = "picked" value = "a"> <! -- 'Toggle 'is true or false --> <input type = "checkbox" v-model = "toggle"> <! -- When elected, 'selected' is the string "abc" --> <select v-model = "selected"> <option value = "abc"> ABC </option> </select>

But sometimes we want to bind the value to a dynamic attribute of the Vue instance. In this case, we can use v-bind, and the value of this attribute can be not a string.

Checkbox

<Input type = "checkbox" v-model = "toggle" v-bind: true-value = "a" v-bind: false-value = "B"> // vm when selected. toggle === vm. a // vm when not selected. toggle === vm. B

Radio

<Input type = "radio" v-model = "pick" v-bind: value = "a"> // vm. pick === vm.

Select Options

<Select v-model = "selected"> <! -- Object literal --> <option v-bind: value = "{number: 123}"> 123 </option> </select> // typeof vm when selected. selected //-> 'object' vm. selected. number //-> 123

Parameter features

Lazy

By default, v-model synchronizes the value and data of the input box in the input event. You can add a feature lazy to change it to synchronization in the change event:

<! -- Update in the "change" instead of "input" event -->
<Input v-model = "msg" lazy>

Number

If you want to automatically convert your input to the Number type (if the original value is NaN, the original value is returned), you can add a feature number:

<Input v-model = "age" number>

Debounce

Debounce sets a minimum latency to synchronize the values and data in the input box after each knock. It is useful if high-consumption operations are required for each update (for example, Ajax requests in the input prompt.

<Input v-model = "msg" debounce = "500">

Note that the debounce parameter does not delay the input event: It delays "writing" the underlying data. Therefore, when debounce is used, vm. $ watch () should be used to respond to data changes. To delay DOM events, use the debounce filter.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.