VueJS应用示例代码：货币转换器
货币转换器
将输入的原货币按结算汇率转为目标货币，参考以下代码实现(currency-converter.html) -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs货币转换器示例</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 = "">
<h2>货币转换器</h2>
<span>输入金额:</span><input type = "number" v-model.number = "amount" placeholder = "输入金额..." /><br/><br/>
<span>原货币:</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>转换成:</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}} 相当于 {{finalamount}} {{convertto}}</span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
currencyfrom : [
{name : "USD", desc:"美元"},
{name:"EUR", desc:"欧元"},
{name:"RMB", desc:"人民币"},
{name:"HKD", desc:"港币"}
],
convertfrom: "RMB",
convertto:"USD",
amount :""
},
computed :{
finalamount:function() {
var to = this.convertto;
var from = this.convertfrom;
var final;
switch(from) {
case "RMB":
if (to == "USD") {
final = this.amount * 0.152;
}
if (to == "EUR") {
final = this.amount * 0.013;
}
if (to == "RMB") {
final = this.amount;
}
if (to == "HKD") {
final = this.amount * 0.0059;
}
break;
case "USD":
if (to == "RMB") {
final = this.amount * 6.58;
}
if (to == "EUR") {
final = this.amount * 0.84;
}
if (to == "USD") {
final = this.amount;
}
if (to == "HKD") {
final = this.amount * 0.38;
}
break;
case "EUR":
if (to == "RMB") {
final = this.amount * 76.22;
}
if (to == "USD") {
final = this.amount * 1.19;
}
if (to == "EUR") {
final = this.amount;
}
if (to == "HKD") {
final = this.amount * 0.45;
}
break;
case "HKD":
if (to == "RMB") {
final = this.amount *169.44;
}
if (to == "USD") {
final = this.amount * 2.65;
}
if (to == "EUR") {
final = this.amount * 2.22;
}
if (to == "HKD") {
final = this.amount;
}
break
}
return final;
}
}
});
</script>
</body>
</html>
执行上面示例代码，得到以下结果 -
说明 - 在上面的例子中，我们创建了一种货币转换器，将货币的一个值转换为其他货币的选定值。示例中创建了两个货币下拉框。 当在文本框中输入转换的数量时，转换后显示如下。使用计算属性来进行货币转换的必要计算。
THE END
