<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>汇率计算器</title>
</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">
                <span>{{item.currency}}</span>
                <span>{{item.amount}}</span>
            </li>
        </ul>
        <p class="intro">用鼠标单击可以切换货币种类</p>
    </div>

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

    <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:6.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,
            }
        };

        let vm = 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,
                    },
                ]
            },
            watch:{
                from:{
                    handler(value){
                        this.to.forEach(item=>{
                            item.amount = this.exchange(this.from.currency,this.from.amount,item.currency)
                        });
                    },
                    deep:true,
                    immediate:true
                }
            },
            methods:{
                exchange(from,amount,to){
                    return (amount * rate[from][to]).toFixed(2);
                }
            }
        });
    </script>
</body>
</html>