v-model is used in Vue to implement bidirectional data binding for form input. 1. The text box binds string values through v-model; 2. The usage of multi-line text boxes is the same as that of single-line text; 3. The single check box binds boolean values; 4. Multiple check boxes bind the same array to collect selected values; 5. The radio button group binds the same data attribute to record selected items; 6. The drop-down box supports both single-choice and multiple-choice, binding strings or arrays respectively; 7. Provides modifiers such as .trim, .number, and .lazy to handle common input scenarios. The essence is: syntax sugar of value and @input, and can expand behavior in custom components to ultimately realize automatic synchronization of data and views.

Binding form inputs in Vue is straightforward using the v-model directive. It creates a two-way data binding between the input element and a data property in your Vue instance. Here's how to use it with different form elements.

1. Text Inputs

For basic text fields, v-model syncs the input value with a data property.

 <template>
  <input v-model="message" placeholder="Enter something">
  <p>Message: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: &#39;&#39;
    }
  }
}
</script>

2. Textarea

Works the same way as text inputs — just bind v-model directly.

 <template>
  <textarea v-model="description"></textarea>
  <p>Description: {{ description }}</p>
</template>

3. Checkbox (Single)

A single checkbox binds to a boolean value.

 <template>
  <input type="checkbox" v-model="isChecked">
  <label>Agree to terms</label>
  <p>Checked: {{ isChecked }}</p>
</template>

4. Multiple Checkboxes

Bind to an array to collect multiple selected values.

 <template>
  <div>
    <input type="checkbox" v-model="fruits" value="apple"> Apple
    <input type="checkbox" v-model="fruits" value="banana"> Banana
    <input type="checkbox" v-model="fruits" value="orange"> Orange
  </div>
  <p>Selected fruits: {{ fruits }}</p>
</template>

<script>
export default {
  data() {
    return {
      fruits: []
    }
  }
}
</script>

5. Radio Buttons

Bind multiple radio buttons to a single data property — the selected value gets assigned.

 <template>
  <div>
    <input type="radio" v-model="picked" value="apple"> Apple
    <input type="radio" v-model="picked" value="banana"> Banana
  </div>
  <p>Picked: {{ picked }}</p>
</template>

6. Select Dropdown

Works with both single and multiple selections.

Single select:

 <template>
  <select v-model="selected">
    <option disabled value="">Choose one</option>
    <option>Apple</option>
    <option>Banana</option>
  </select>
  <p>Selected: {{ selected }}</p>
</template>

Multiple (with multiple attribute):

 <select v-model="selectedOptions" multiple>
  <option>Apple</option>
  <option>Banana</option>
  <option>Orange</option>
</select>

7. Modifiers for v-model

Vue provides modifiers to handle common input patterns:

• .trim — strips whitespace
• .number — converts input to number
• .lazy — syncs on change instead of input

 <input v-model.number="age" type="text">
<input v-model.trim="username">
<input v-model.lazy="searchQuery">

Notes

• v-model is syntactic sugar for :value @input (or :modelValue @update:modelValue in custom components).
• In custom components, you can customize v-model behavior using model option or defineModel() in Vue 3's script setup (with Vue 3.4 ).

Basically, v-model is the go-to for form binding in Vue — just link it to a reactive data property and Vue handles the rest.

The above is the detailed content of How to bind form inputs in Vue?. For more information, please follow other related articles on the PHP Chinese website!