No.4 one step at a vuejs form input binding

Basic usage

You can use the V-model directive to create two-way data binding on a form control element. It automatically picks the correct method to update the element based on the type of control. Although somewhat magical, V-model is essentially a syntactic sugar, which listens to user input events to update data, and particularly deals with extreme examples

Binding to Text

<DivID= "Demo4"><inputV-model= "message"placeholder= "Edit Me"><P>Message is {{message}}}</P></Div><Script>varVMS=NewVue ({el:"#demo4", Data:{message:"'}})</Script>

<DivID= "Demo4"><P>Mutiple message is</P><Pstyle= "White-space:pre-line;">{{Message}}</P><BR><textareaV-model= "message"placeholder= "Add multiple lines">11</textarea></Div><Script>varVMS=NewVue ({el:"#demo4", Data:{message:"'}})</Script>

Binding to multiple lines of text
Attention
Input label changed to TEXTAREA label

The operation results are as follows

check box

• Single check box sample

<type= "checkbox"  ID= "checkbox"  v-model= " Checked "><for=" checked> "></ label >

• Multiple check boxes

Actually, it's just a few more single-choice labels.

Div id= "Demo7" ><inputtype= "checkbox"ID= "Jack"value= "Jack"V-model= "CheckNames"><label for= "Jack">Jack</label><inputtype= "checkbox"ID= "Clay"value= "Clay"V-model= "CheckNames"><label for= "Clay">Jack</label><inputtype= "checkbox"ID= "Scott"value= "Scott"V-model= "CheckNames"><label for= "Scott">Jack</label><BR><span>checkednames Are:{{checknames}}</span></Div><Script>NewVue ({el:"#demo7", data:{checknames:[]}})</Script>

In fact, you can change the checkbox in type to radio.Radio button Selection list

<DivID= "Example-5">  <SelectV-model= "Selected">    <optionDisabled Value="">Please select</option>    <option>A</option>    <option>B</option>    <option>C</option>  </Select>  <span>Selected: {{Selected}}</span></Div>New Vue ({el: ' ... ', data: {selected: '}})

No.4 one step at a vuejs form input binding