CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

31 December, 2020

Vue.js Form Input Bindings

 Programing Coderfunda     December 31, 2020     Vue.js Tutorial     No comments   

Vue.js Form Input Bindings

Vue.js provides a v-model directive that can be used to create two-way data bindings on form inputs, text, textarea, and select fields.

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. The v-model directive uses different properties internally and emits different events for different types of input elements. Generally, we use three types of binding in form input binding:

  • Textarea Binding: 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.

Textarea Binding

Let's take a simple example to demonstrate textarea binding:

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Data Binding</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "databinding">  
  9.          <h3>Textbox</h3>  
  10.          <input  v-model = "name" placeholder = "Enter your name.." />  
  11.          <h3>Your name is: {{name}}</h3>  
  12.          <hr/>  
  13.          <h3>Textarea</h3>  
  14.          <textarea v-model = "textmessage" placeholder = "Add Details"></textarea>  
  15.          <h1><p>{{textmessage}}</p></h1>  
  16.          <hr/>  
  17.          <h3>Checkbox</h3>  
  18.          <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}  
  19.       </div>  
  20.       <script src="index.js"></script>  
  21.    </body>  
  22. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#databinding',  
  3.             data: {  
  4.                name:'',  
  5.                textmessage:'',  
  6.                checked : false  
  7.             }  
  8.          })  

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

After the execution of the program, you will see the following output:

Output:

Vue.js Form Input Bindings

You can see that the textbox and textarea are empty now. The checkbox is also unchecked and shows the false value. Now, type some value in textbox and textarea, the v-model is assigned the value name and the name is displayed in {{name}}, which displays whatever is typed in the textbox. In the same way, the value will be displayed that is written in textarea.

Vue.js Form Input Bindings

Radio and Select Binding

Let's take a simple example to demonstrate radio and select binding:

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Data Binding</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "databinding">  
  9.          <h3>Radio</h3>  
  10.          <input type = "radio" id = "yes" value = "Yes" v-model = "picked"> Yes  
  11.          <input type = "radio" id = "no" value = "No" v-model = "picked"> No  
  12.          <h3>Radio element clicked: {{picked}} </h3>  
  13.          <hr/>  
  14.          <h3>Select</h3>  
  15.          <select v-model = "languages">  
  16.             <option disabled value = "">Please select one</option>  
  17.             <option>Java</option>  
  18.             <option>PHP</option>  
  19.             <option>C</option>  
  20.             <option>C++</option>  
  21.             <option>JavaScript</option>  
  22.          </select>  
  23.          <h3>Your selected language is: {{ languages }}</h3>  
  24.          <hr/>  
  25.       </div>  
  26.       <script src="index.js"></script>  
  27.    </body>  
  28. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#databinding',  
  3.             data: {  
  4.                picked : 'No',  
  5.                languages : "Java"  
  6.             }  
  7.          })  

After the execution of the program, you will see the following output:

Output:

Vue.js Form Input Bindings

You can see that the default selected radio element is No and selected language is Java. Now, you can change the value as you required. See the following output:

Vue.js Form Input Bindings

Modifier Binding

Let's see an example to demonstrate all three modifiers .trim, .number, and .lazy altogether.

.number Modifier: It is used when you want user input to be typecast as a number automatically. It allows you to enter numbers only. It does not take any other input besides numbers.

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

.lazy Modifier: It is used to display the content present in the textbox only after it is fully entered and the user leaves the textbox. The v-model syncs the input with the data after each input event by default.

  1. <input v-model.lazy = "msg">  

.trim Modifier: This modifier is used to trim the whitespace from user input automatically. It removes any spaces entered at the start and at the end.

  1. <input v-model.trim = "message">  

Index.html

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Data Binding</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "databinding">  
  9.           <h3> The .number modifier example</h3>  
  10.           <span style = "font-size:20px;">Enter Age:</span> <input v-model.number = "age" type = "number">  
  11.           <br/>  
  12.           <br/>  
  13.           <hr/>  
  14.           <h3> The .lazy modifier example</h3>  
  15.          <span style = "font-size:20px;">Enter Message:</span> <input v-model.lazy = "msg">  
  16.          <h4>Display Message : {{msg}}</h4>  
  17.          <br/>  
  18.          <hr/>  
  19.          <h3> The .trim modifier example</h3>  
  20.          <span style = "font-size:20px;">Enter Message : </span><input v-model.trim = "message">  
  21.          <h4>Display Message : {{message}}</h4>  
  22.       </div>  
  23.       <script src="index.js"></script>  
  24.    </body>  
  25. </html>  

Index.js

  1. var vm = new Vue({  
  2.             el: '#databinding',  
  3.             data: {  
  4.                age : 0,  
  5.                msg: '',  
  6.                message : ''  
  7.             }  
  8.          })  

After the execution of the program, you will see the following output:

Output:

Vue.js Form Input Bindings

You can see that every modifier is empty. Now, you can enter any values to see the result as the following output.

Vue.js Form Input Bindings
Resource by : javatpoint
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • AI foot tracking model
    I am a student doing a graduation project. I urgently need to deal with this model (I am attaching a link). I've never worked with pytho...
  • Laravel Search String
      Laravel Search String is a package by   Loris Leiva   that generates database queries based on one unique string using a simple and custom...
  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • Laravel - Installation
    For managing dependencies, Laravel uses   composer . Make sure you have a Composer installed on your system before you install Laravel. In t...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda