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

  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • iOS 17 Force Screen Rotation not working on iPAD only
    I have followed all the links on Google and StackOverFlow, unfortunately, I could not find any reliable solution Specifically for iPad devic...
  • C++ in Hindi Introduction
    C ++ का परिचय C ++ एक ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग लैंग्वेज है। C ++ को Bjarne Stroustrup द्वारा विकसित किया गया था। C ++ में आने से पह...
  • Python AttributeError: 'str' has no attribute glob
    I am trying to look for a folder in a directory but I am getting the error.AttributeError: 'str' has no attribute glob Here's ...

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 (68)
  • 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 (2)
  • 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