Vue.js the form control binding _javascript tips for everyday learning

Basic usage

You can use the V-model directive to create bidirectional data binding on form control elements. It automatically picks the correct method to update the element based on the control type. Although a bit magical, V-model is just a syntactic candy, updating data in user input events, and dealing with extreme examples in particular.

Text

<span>message is: {}}</span>
<br>
<input type= ' text ' v-model= ' message ' placeholder= "Edit Me" >

Checkbox

Single check box, logical value:

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

Multiple check boxes, 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

Radio:

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

Multi-Select (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 , rendered with v-for:

<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 '}}}

Binding value

For radio buttons, check box and marquee options, the value of the V-model binding is usually a static string (for a check box is a logical value):

<!--is selected, ' Picked ' is the string "a"-->
<input type= "Radio" v-model= "Picked" value= "a" >

<!--' Toggle ' True or False-->
<input type= "checkbox" v-model= "Toggle" >

<!--is selected, ' selected ' is the string ' abc '-->
<select v-model= "selected" >
 <option value= "abc" >ABC</option>
</select>

But sometimes we want to bind value to a dynamic property of the Vue instance, which can be implemented with V-bind, and the value of this property can be not a string.

Checkbox

<input
 type= "checkbox"
 v-model= "toggle"
 v-bind:true-value= "a"
 v-bind:false-value= "B" >

//
Vm.toggle = = VM.A//
when not selected
Vm.toggle = = = Vm.b

Radio

<input type= "Radio" v-model= "Pick" v-bind:value= "a" >

//election Vm.pick
= = Vm.a

Select Options

<select v-model= "selected" >
 <!--object literal-->
 <option v-bind:value= "{number:123}" >123< /option>
</select>//

typeof vm.selected//
-> ' object '
vm.selected.number//- > 123

Parameter attributes

Lazy

By default, V-model synchronizes input box values with data in the input event, adding an attribute lazy, which can be changed to sync in the Change event:

<!--update--> in "change" instead of "input" events
<input v-model= "MSG" lazy>

Number

If you want to automatically convert the user's input to number type (return the original value if the conversion result of the original value is NaN), you can add an attribute number:

<input v-model= "Age" number>

Debounce

Debounce sets a minimum delay to synchronize the value and data of the input box after each tap. This is useful if you want to do a high consumption of each update (for example, Ajax requests in the input hint).

<input v-model= "msg" debounce= ">"

Note The debounce parameter does not delay the input event: it delays "writing" to the underlying data. Therefore, when using debounce, you should use the VM. $watch () to respond to changes in data. If you want to delay DOM events, you should use the Debounce filter.

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.