汇率计算器

最新推荐文章于 2023-10-13 10:03:31 发布

llllinuuu

最新推荐文章于 2023-10-13 10:03:31 发布

阅读量415

点赞数

分类专栏：写过的一些案例文章标签： vue.js javascript

本文链接：https://blog.csdn.net/llllinuuu/article/details/129287919

版权

写过的一些案例专栏收录该内容

5 篇文章

订阅专栏

<!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>
</head>
<body>
    <div id="app">
        <p class="title">汇率计算器</p>
        <p>CNY人民币,BTC比特币,HKD港币,USD美元,BMD百慕大元</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" @click="changeCurrency">
                <span> {{item.currency}} </span>
                <span> {{item.amount}} </span>
            </li>
        </ul>
    </div>

    <script src="../vue.js"></script>

    <script>
        // rate：汇率
        let rate = {
            CNY:{CNY:1 ,BTC:0.0000072,HKD:1.08,USD:0.14,BMD:0.14},
            BTC:{CNY:138999.00,BTC:1,HKD:150707.00,USD:19199.00, BMD:19200.81}, 
            HKD:{CNY:0.92 ,BTC:0.0000066,HKD:1,USD:0.13,BMD:0.13}, 
            USD:{CNY:7.24,BTC:0.000052,HKD:7.85,USD:1,BMD:1.00}, 
            BMD:{CNY:7.24,BTC:0.000052,HKD:7.85,USD:1.00,BMD:1}
            // CNY人民币，BTC比特币，HKD港币，USD美元，BMD百慕大元
        }
        new Vue({
            el:'#app',
            data:{
                from:{currency:'CNY',amount:1}, 
                to:[
                    {currency:'BTC',amount:0},
                    {currency:'HKD',amount:0},
                    {currency:'USD',amount:0},
                    {currency:'BMD',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>
</body>
</html>