Home » Simple Vuejs Currency Converter Example

Simple Vuejs Currency Converter Example

Today, We want to share with you Simple Vuejs Currency Converter Example.In this post we will show you vue js examples tutorial, hear for How to format a number as a currency value in vuejs we will give you demo and example for implement.In this post, we will learn about pablolazaro/vue-currency-exchange: Currency exchange with an example.

Simple Vuejs Currency Converter Example

There are the Following The simple About Simple Vuejs Currency Converter Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop vue js step by step example, so the vue js examples tutorial is following below.

Example 1: Currency Converter using Vue

<html>
   <head>
      <title>Simple Currency Converter in VueJs Example</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         #currency_converter_app{
            padding: 20px 15px 15px 15px;
            margin: 0 0 25px 0;
            width: auusd_name;
            background-color: #e7e7e7;
         }
         span, option, input {
            font-size:25px;
         }
      </style>
      
      <div id = "currency_converter_app" style = "">
         <h1>Vuejs Currency Converter</h1>
         <span>Enter Any Amount:</span><input type = "number" v-model.number = "price" placeholder = "Enter Amount" /><br/><br/>
         <span>Convert From:</span>
         <select v-model = "frmcurrency_convert" style = "width:300px;font-size:25px;">
            <option v-for = "(a, index) in currencyfrom"  v-bind:value = "a.name">{{a.curr_description}}</option>
         </select>
         <span>Convert To:</span>
         <select v-model = "convertusd_name" style = "width:300px;font-size:25px;">
            <option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.curr_description}}</option>
         </select><br/><br/>
         <span> {{price}} {{frmcurrency_convert}} equals {{resultsprice}} {{convertusd_name}}</span>
      </div>
      
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#currency_converter_app',
            data: {
               name:'',
               currencyfrom : [
                  {name : "USD", curr_description:"US Dollar"},
                  {name:"EUR", curr_description:"Euro"},
                  {name:"INR", curr_description:"Indian Rupee"},
                  {name:"BHD", curr_description:"Bahraini Dinar"}
               ],
               frmcurrency_convert: "INR",
               convertusd_name:"USD",
               price :""
            },
            computed :{
               resultsprice:function() {
                  var usd_name = this.convertusd_name;
                  var from = this.frmcurrency_convert;
                  var results;
                  switch(from) {
                     case "INR":
                     if (usd_name == "USD") {
                        results = this.price * 0.016;
                     }
                     if (usd_name == "EUR") {
                        results = this.price * 0.013;
                     }
                     if (usd_name == "INR") {
                        results = this.price;
                     }
                     if (usd_name == "BHD") {
                        results = this.price * 0.0059;
                     }
                     break;
                     case "USD":
                     if (usd_name == "INR") {
                        results = this.price * 63.88;
                     }
                     if (usd_name == "EUR") {
                        results = this.price * 0.84;
                     }
                     if (usd_name == "USD") {
                        results = this.price;
                     }
                     if (usd_name == "BHD") {
                        results = this.price * 0.38;
                     }
                     break;
                     case "EUR":
                     if (usd_name == "INR") {
                        results = this.price * 76.22;
                     }
                     if (usd_name == "USD") {
                        results = this.price * 1.19;
                     }
                     if (usd_name == "EUR") {
                        results = this.price;
                     }
                     if (usd_name == "BHD") {
                        results = this.price * 0.45;
                     }
                     break;
                     case "BHD":
                     if (usd_name == "INR") {
                        results = this.price *169.44;
                     }
                     if (usd_name == "USD") {
                        results = this.price * 2.65;
                     }
                     if (usd_name == "EUR") {
                        results = this.price * 2.22;
                     }
                     if (usd_name == "BHD") {
                        results = this.price;
                     }
                     break
                  }
                  return results;
               }
            }
         });
      </script>
   </body>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  how to create custom plugin in wordpress from scratch

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Simple Vuejs Currency Converter Example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Vue JS Get Value From Selected Dropdown
  2. Read Also:  Laravel Eloquent Relationships Join Multiple Tables
  3. Read Also:  Vue.js Hello World
  4. Read Also:  vue js Simple Login Form Tutorials
  5. Read Also:  Move Background Image on Mouseover Using jQuery
  6. Read Also:  react open link in new tab programmatically
  7. Read Also:  Smooth Scrolling Effect in JavaScript Using Vuejs
  8. Read Also:  Debugging Eloquent Queries in Laravel
  9. Read Also:  Get Content and Attributes using JavaScript jQuery
  10. Read Also:  Vuejs Double Click to inline editing vue Grid Component

Leave a Comment

Your email address will not be published. Required fields are marked *