12.Vue.js form

This section we introduce the application form on Vue.js for everyone.

You can create two-way data binding on the form control elements with v-model command.

<div ID = "App"> 
  <P> INPUT element: </ P> <INPUT = V-Model "Message" placeholder = "Edit I ......"> 
  <P> message is: {{message}} </ p > 
  <P> TextArea element: </ P> 
  <P style = "White Space-: pre"> message2 {{}} </ P> <TextArea = V-Model "message2" placeholder = "multiline input ...... "> </ TextArea> 
</ div> 
<Script> 
new new Vue ({ 
  EL: '#app', 
  Data: { Message: 'Runoob', 
    message2: 'novice tutorial \ r \ nhttp: //www.runoob.com ' 
  } 
}) 
</ Script>
  
    
 
 
   

Check box

If a check box is a logical value, if a plurality are bound to the same array

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

 

single button

The following examples demonstrate the radio button for two-way data binding:

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

 

select list

The following examples demonstrate the two-way data binding drop-down list:

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

Modifiers

.lazy

By default, v-model synchronization input value in the input event data box, but you can add a modifier lazy, so the change into a synchronous event:

<-! Update "change" rather than "input" event -> 
<v-model.lazy the INPUT = "msg">

.number

If the user wants to automatically enter a value into the type Number (original value if the conversion result is returned to the original value NaN), a modifier may be added to the v-model number to process the input values:

<input v-model.number="age" type="number">

.trim

To automatically filtered trailing spaces input by a user, the modifier may be added to trim the v-model filter input:

<input v-model.trim="msg">