vue学习之简单货币换算

<div class="vm">
        <label>人民币</label>
        <input type="text" :value='RMB' class="RMB" @input="blur">
        <span>转美元:{{RMB | conversion('¥')}}</span>
        <br>
        <br>
        <label>美元</label>
        <input type="text" :value='US' class="US" @input="blur2">
        <span>转人民币:{{US | conversion('$')}}</span>
    </div>

    <script>
        Vue.config.productionTip = false;

        Vue.filter("conversion", (value, MoneyStr) => {
            if (MoneyStr == "¥") {
                return Number(value) * 0.1578;
            } else {
                return Number(value) * 6.3365;
            }
        })
        new Vue({
            data: {
                RMB: 0,
                US: 0,
            },
            methods: {
                blur: function () {
                    this.RMB = document.querySelector(".RMB").value;
                },
                blur2: function(){
                    this.US = document.querySelector(".US").value;
                }
            },
        }).$mount(".vm")
    </script>

 

posted @ 2022-02-17 08:56  4zero4NotFound  阅读(524)  评论(0编辑  收藏  举报