06-Mar-2021
.
Admin
Hi Guys,
Today,I will learn you how to use vue.js form input bindings. We will show example of form input bindings in vue.js.You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements.The v-model directive automatically picks the correct way of updating the element according to the input type.It provides two-way data binding by binding the input text element and the value binded to a variable assigned.
v-model will ignore the initial value, checked, or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.
we use three types of binding in form input binding. v-model internally uses different properties and emits different events for different input elements.
->Textarea: In this binding, we use text and textarea to bind the value property and input event.
->Radio and Select Binding: In this binding, we use checkboxes and radiobuttons to bind the checked property and change event.
->Modifiers Binding: We can also use modifiers like .lazy, .trim, .number, etc. in Form input binding examples.
Full Example
<html>
<head>
<title>Vue.js Form Input Bindings Example - nicesnippets.com</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id ="example">
<h3>Textbox</h3>
<label>Name</label>
<input v-model = "name" placeholder = "Enter your name.." />
<p><b>Your name is:</b> {{name}}</p>
<h3>Textarea</h3>
<label>Details</label>
<textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
<p><b>Details:</b> {{textmessage}}</p>
<h3>Checkbox</h3>
<input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
name:'',
textmessage:'',
checked : false
}
})
</script>
</body>
</html>
It will help you...
#Vue.Js
#Vue
