汇率计算器

最新推荐文章于 2024-06-07 16:03:08 发布

啊唯11

最新推荐文章于 2024-06-07 16:03:08 发布

阅读量261

点赞数

本文链接：https://blog.csdn.net/weixin_66059613/article/details/127473126

版权

Vue.js 汇率计算器前端开发 JavaScript 实时转换

关键词由CSDN通过智能技术生成

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汇率计算器</title>
    <script src="../js/vue.js"></script>
    <style>
 
    </style>
</head>
<body>
    <div id="app">
        <p class="title">汇率计算器</p>
        <ul>
            <li>
            <span>{{from.currency}}</span>
            <input type="text" v-model="from.amount">
           </li>
           <li v-for="item in to" v-bind:data-currency="item.currency" v-on:click="changeCurrency">
            <span>{{item.currency}}</span>
            <span>{{item.amount}}</span>
           </li>
        </ul>
        <i class="intro">点击切换</i>
    </div>
</body>
<script>
     let rate ={
              CNY:{CNY:1 , JPY:16.876, HKD:1.1870, USD:0.1526, EUR:0.1294},
              JPY:{CNY:0.0595 , JPY:1, HKD:0.0702, USD:0.0090, EUR:0.0077},
              HKD:{CNY:0.8463 , JPY:14.226, HKD:1, USD:0.1286, EUR:0.10952},
              USD:{CNY:16.5813, JPY:110.62, HKD:7.7759, USD:1, EUR:0.85164},
              EUR:{CNY:7.7278 , JPY:129.89, HKD:9.1304, USD:1.1742, EUR:1},
            }
    new Vue({
        el:'#app',
        data:{
            from:{currency:'CNY',amount:100},
            to:[
            {currency:'JPY',amount:0},
            {currency:'HKD',amount:0},
            {currency:'USD',amount:0},
            {currency:'EUR',amount:0},
            ],
        },
        methods:{
            exchange(from, amount, to){
                return (amount * rate [from] [to] ).toFixed(2)
            },
            changeCurrency(event){
            const c = event.currentTarget.dataset.currency;
            const f =this.from.currency;
            this.from.currency = c;
            this.to.find(_ => _.currency === c).currency =f ;
            }
        },
        watch:{
           from:{
            handler(value){
             this.to.forEach(item => {
                item.amount = this.exchange(this.from.currency,
                   this.from.amount, item.currency
              )});
            },
            deep:true,
            immediate:true
           }
        }
    })
</script>
</html>