Vue.js Forms

In this section, we will introduce the application of Vue.js forms.

You can use the v-model directive to create two-way data bindings on form control elements.

v-model automatically selects the correct method to update the element based on the control type.

Input Box

The example demonstrates using v-model to achieve two-way data binding on input and textarea elements:

<div id="app">
  <p>input element:</p>
  <input v-model="message" placeholder="Edit me...">
  <p>Message is: {{ message }}</p>

  <p>textarea element:</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="Multiline text input..."></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'tutorialpro',
    message2: 'tutorialpro.org\r\nhttp://www.tutorialpro.org'
  }
})
</script>

Checkbox

A single checkbox binds to a boolean value, while multiple checkboxes bind to the same array:

Checkbox

The following example demonstrates two-way data binding for checkboxes:

<div id="app">
  <p>Single checkbox:</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>

  <p>Multiple checkboxes:</p>
  <input type="checkbox" id="tutorialpro" value="tutorialpro" v-model="checkedNames">
  <label for="tutorialpro">tutorialpro</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>Selected values: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

The effect of checking the checkboxes in the example is as follows:

Radio Buttons

The following example demonstrates two-way data binding for radio buttons:

Radio Buttons

<div id="app">
  <input type="radio" id="tutorialpro" value="tutorialpro" v-model="picked">
  <label for="tutorialpro">tutorialpro</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>Selected value: {{ picked }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    picked : 'tutorialpro'
  }
})
</script>

After selecting, the effect is as shown in the following image:

Select List

The following example demonstrates two-way data binding for dropdown lists:

Select

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">Choose a website</option>
    <option value="www.tutorialpro.org">tutorialpro</option>
    <option value="www.google.com">Google</option>
  </select>

  <div id="output">

The selected website is: {{selected}} </div> </div>

<script> new Vue({ el: '#app', data: { selected: '' } }) </script> ```

Select tutorialpro, and the output will be as shown below: