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

04 July, 2022

VueJS Examples

 Programing Coderfunda     July 04, 2022     Vue.js Tutorial     No comments   

 

Example 1: Currency Converter

<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
#databinding{
padding
: 20px 15px 15px 15px;
margin
: 0 0 25px 0;
width
: auto;
background
-color: #e7e7e7;
}
span
, option, input {
font
-size:25px;
}
</style>

<div id = "databinding" style = "">
<h1>Currency Converter</h1>
<span>Enter Amount:</span><input type = "number" v-model.number = "amount" placeholder = "Enter Amount" /><br/><br/>
<span>Convert From:</span>
<select v-model = "convertfrom" style = "width:300px;font-size:25px;">
<option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
</select>
<span>Convert To:</span>
<select v-model = "convertto" style = "width:300px;font-size:25px;">
<option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
</select><br/><br/>
<span> {{amount}} {{convertfrom}} equals {{finalamount}} {{convertto}}</span>
</div>

<script type = "text/javascript">
var vm = new Vue({
el
: '#databinding',
data
: {
name
:'',
currencyfrom
: [
{name : "USD", desc:"US Dollar"},
{name:"EUR", desc:"Euro"},
{name:"INR", desc:"Indian Rupee"},
{name:"BHD", desc:"Bahraini Dinar"}
],
convertfrom
: "INR",
convertto
:"USD",
amount
:""
},
computed
:{
finalamount
:function() {
var to = this.convertto;
var from = this.convertfrom;
var final;
switch(from) {
case "INR":
if (to == "USD") {
final
= this.amount * 0.016;
}
if (to == "EUR") {
final
= this.amount * 0.013;
}
if (to == "INR") {
final
= this.amount;
}
if (to == "BHD") {
final
= this.amount * 0.0059;
}
break;
case "USD":
if (to == "INR") {
final
= this.amount * 63.88;
}
if (to == "EUR") {
final
= this.amount * 0.84;
}
if (to == "USD") {
final
= this.amount;
}
if (to == "BHD") {
final
= this.amount * 0.38;
}
break;
case "EUR":
if (to == "INR") {
final
= this.amount * 76.22;
}
if (to == "USD") {
final
= this.amount * 1.19;
}
if (to == "EUR") {
final
= this.amount;
}
if (to == "BHD") {
final
= this.amount * 0.45;
}
break;
case "BHD":
if (to == "INR") {
final
= this.amount *169.44;
}
if (to == "USD") {
final
= this.amount * 2.65;
}
if (to == "EUR") {
final
= this.amount * 2.22;
}
if (to == "BHD") {
final
= this.amount;
}
break
}
return final;
}
}
});
</script>
</body>
</html>

Output (Conversion to USD)

Conversion to USD

Output: Conversion to BHD

Conversion to BHD

Explanation − In the above example, we have created a currency converter that converts one value of currency to the selected value of other currency. We have created two dropdowns of currency. When we enter the amount to convert in the textbox, the same is displayed below after conversion. We are using the computed property to do the necessary calculation for currency conversion.

Example 2: Customer Details

<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
#databinding{
padding
: 20px 15px 15px 15px;
margin
: 0 0 25px 0;
width
: auto;
}
span
, option, input {
font
-size:20px;
}
.Table{
display
: table;
width
:80%;
}
.Title{
display
: table-caption;
text
-align: center;
font
-weight: bold;
font
-size: larger;
}
.Heading{
display
: table-row;
font
-weight: bold;
text
-align: center;
}
.Row{
display
: table-row;
}
.Cell{
display
: table-cell;
border
: solid;
border
-width: thin;
padding
-left: 5px;
padding
-right: 5px;
width
:30%;
}
</style>

<div id = "databinding" style = "">
<h1>Customer Details</h1>
<span>First Name</span>
<input type = "text" placeholder = "Enter First Name" v-model = "fname"/>
<span>Last Name</span>
<input type = "text" placeholder = "Enter Last Name" v-model = "lname"/>
<span>Address</span>
<input type = "text" placeholder = "Enter Address" v-model = "addr"/>
<button v-on:click = "showdata" v-bind:style = "styleobj">Add</button>
<br/>
<br/>
<customercomponent
v-for = "(item, index) in custdet"
v-bind:item = "item"
v-bind:index = "index"
v-bind:itr = "item"
v-bind:key = "item.fname"
v-on:removeelement = "custdet.splice(index, 1)">
</customercomponent>
</div>

<script type = "text/javascript">
Vue.component('customercomponent',{
template
: '<div class = "Table"><div class = "Row" v-bind:style = "styleobj"><div class = "Cell"><p>{{itr.fname}}</p></div><div class = "Cell"><p>{{itr.lname}}</p></div><div class = "Cell"><p>{{itr.addr}}</p></div><div class = "Cell"><p><button v-on:click = "$emit(\'removeelement\')">X</button></p></div></div></div>',
props
: ['itr', 'index'],
data
: function() {
return {
styleobj
: {
backgroundColor
:this.getcolor(),
fontSize
: 20
}
}
},
methods
:{
getcolor
: function() {
if (this.index % 2) {
return "#FFE633";
} else {
return "#D4CA87";
}
}
}
});
var vm = new Vue({
el
: '#databinding',
data
: {
fname
:'',
lname
:'',
addr
: '',
custdet
:[],
styleobj
: {
backgroundColor
: '#2196F3!important',
cursor
: 'pointer',
padding
: '8px 16px',
verticalAlign
: 'middle',
}
},
methods
:{
showdata
: function() {
this.custdet.push({
fname
: this.fname,
lname
: this.lname,
addr
: this.addr
});
this.fname = "";
this.lname = "";
this.addr = "";
}
}
});
</script>
</body>
</html>

Output

Output

Output after deletion

Output after Deletion

Explanation − In the above example, we have three texboxes to enter - the First Name, Last Name and Address. There is an add button, which adds the values entered in the textboxes in a table format with a delete button.

The table format is created using components. The click button interacts with the parent component using the emit event to delete the elemet from the array. The values entered are stored in the array and the same are shared with the child component using the prop property.

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • Using Transitions and Animations TogetherUsing Transitions and Animations TogetherVue.js requires attaching event listeners to make it known when a transition has ended. It may be transi… Read More
  • Vue.js Animation Vue.js AnimationIn Vue.js applications, we can apply animations in the same way as we applied transition in earlier examples. Animation also has clas… Read More
  • Vue.js Routing Vue.js Routing Vue.js does not have a built-in router feature, but you can easily create a single page application that supports routing using … Read More
  • Vue.js Transition and Animation Vue.js Transition and AnimationVue.js provides several ways to apply transition and animation effects to the applications when you insert, updat… Read More
  • Vue.js Custom DirectivesVue.js Custom Directives Vue.js directives are used in Vue.js applications to make them reusable and straightforward. Directives are just like instru… Read More
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...
  • 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...
  • C++ in Hindi Introduction
    C ++ का परिचय C ++ एक ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग लैंग्वेज है। C ++ को Bjarne Stroustrup द्वारा विकसित किया गया था। C ++ में आने से पह...
  • 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...

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)

  • Sitaare Zameen Par Full Movie Review - 7/7/2025
  • Step-by-step Vue.js Tutorial Beginner to Master - 7/7/2025
  • Tailwindcss best practices for responsive design - 7/1/2025
  • Tailwind CSS Tutorial (Beginner to Master) - 7/1/2025
  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024

Laravel News

  • PHP Fatal Error Backtraces in PHP 8.5 - 7/11/2025
  • Laravel's Rule::contains() for Fluent Array Validation - 7/6/2025
  • NativePHP for Mobile v1.1: Smaller, Smarter, and Ready to Scale - 7/9/2025
  • PHP 8.5 Introduces an INI Diff Option - 7/10/2025
  • Custom Object Casting in Laravel Models - 7/6/2025

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