Vue Form Inputs
Master two-way data binding with v-model
📝 What are Vue Form Inputs?
Vue form inputs use v-model directive to create two-way data binding between form elements and component data. Changes in the input automatically update your data, and data changes update the input instantly.
<!-- Simple text input with v-model -->
<input v-model="message" placeholder="Type here">
<p>You typed: {{ message }}</p>
Form Input Types
Text Input
Bind text data with v-model
<input v-model="name" type="text">Checkbox
Bind boolean or array values
<input v-model="checked" type="checkbox">Radio Button
Select one option from many
<input v-model="picked" type="radio" value="A">Select Dropdown
Choose from dropdown list
<select v-model="selected">
<option>A</option>
</select>🔹 Text Input Example
Basic text input with two-way binding:
<div id="app">
<input v-model="username" placeholder="Enter your name">
<p>Hello, {{ username }}!</p>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
username: ''
}
}
}).mount('#app');
</script>Output:
Hello, [Your input appears here]!
🔹 Checkbox Example
Single checkbox for boolean values:
<div id="app">
<input type="checkbox" v-model="agreed">
<label>I agree to terms</label>
<p>Status: {{ agreed ? 'Agreed' : 'Not agreed' }}</p>
</div>
<script>
createApp({
data() {
return {
agreed: false
}
}
}).mount('#app');
</script>Output:
Status: Not agreed
🔹 Multiple Checkboxes
Bind multiple checkboxes to an array:
<div id="app">
<input type="checkbox" v-model="hobbies" value="Reading"> Reading
<input type="checkbox" v-model="hobbies" value="Gaming"> Gaming
<input type="checkbox" v-model="hobbies" value="Coding"> Coding
<p>Selected: {{ hobbies.join(', ') }}</p>
</div>
<script>
createApp({
data() {
return {
hobbies: []
}
}
}).mount('#app');
</script>Output:
Selected: [Your selections]
🔹 Radio Buttons
Select one option from a group:
<div id="app">
<input type="radio" v-model="size" value="Small"> Small
<input type="radio" v-model="size" value="Medium"> Medium
<input type="radio" v-model="size" value="Large"> Large
<p>Selected size: {{ size }}</p>
</div>
<script>
createApp({
data() {
return {
size: 'Medium'
}
}
}).mount('#app');
</script>Output:
Selected size: Medium
🔹 Select Dropdown
Choose from a dropdown menu:
<div id="app">
<select v-model="country">
<option disabled value="">Please select</option>
<option>USA</option>
<option>Canada</option>
<option>UK</option>
</select>
<p>Selected: {{ country }}</p>
</div>
<script>
createApp({
data() {
return {
country: ''
}
}
}).mount('#app');
</script>Output:
Selected: [Your selection]
🔹 Textarea
Multi-line text input:
<div id="app">
<textarea v-model="message" placeholder="Enter message"></textarea>
<p>Message length: {{ message.length }}</p>
</div>
<script>
createApp({
data() {
return {
message: ''
}
}
}).mount('#app');
</script>Output:
Message length: 0
🔹 v-model Modifiers
Enhance v-model with modifiers:
<!-- .lazy: Update after change event -->
<input v-model.lazy="msg">
<!-- .number: Convert to number -->
<input v-model.number="age" type="number">
<!-- .trim: Remove whitespace -->
<input v-model.trim="username">- .lazy: Updates on change instead of input
- .number: Automatically converts to number type
- .trim: Removes leading/trailing whitespace