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 :
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.