1. 编程号首页

web学习—汇率计算器[通俗易懂]

编程小号 • • 未分类

web学习—汇率计算器[通俗易懂]该内容为一篇关于使用Vue.js实现汇率计算器的案例，涉及的技术包括html5、css3、JavaScript、Less和Vue.js等

学习目标：

出自vue.js书中的案例

web学习---汇率计算器[通俗易懂]

 

仅对案例进行实现，仅供学习和分享

 目录

学习目标：

学习内容：

代码：

html代码：

less代码：

js代码：

总结：

学习内容：

html5+css3+javascript+less+vue

：

  1. 了解vue2的框架使用
  2. 学会使用watch监视嵌套的对象
  3. 熟悉vue2中this指向

代码：

html代码：

<!-- author:    Eternity.Arrebol -->
<!-- CSDN:    https://blog.csdn.net/qq_36920766?spm=1010.2135.3001.5421 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="icon" href="../titlePhoto.ico" type="image/x-icon" />
        <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>Web学习-汇率计算器</title>
        <link rel="stylesheet" href="com.css" />
        <script src="../../vue.js"></script>
        <script src="vm.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>汇率计算器</h2>

            <div class="box">
                <div class="box1">
                    <ul>
                        <li>
                            <span class="leftSpan">{
  
  {currentName}}</span>
                            <input type="number" v-model.lazy="currentRate" />
                        </li>
                    </ul>
                </div>
                <div class="box2">
                    <ul>
                        <li
                            v-for="(item,index) in toRate"
                            :key="item.cur"
                            @click="changeCountName(item,index)"
                        >
                            <span class="leftSpan">{
  
  {item.cur}}</span>
                            <span class="rightSpan">{
  
  {item.amount}}</span>
                            <br />
                        </li>
                    </ul>
                </div>
            </div>
            <p></p>
            <p>点击货币可以进行切换</p>
            <p>作者:Eternity.yzy.Arrebol</p>
        </div>
        <!-- 脱离vue可以减少vue的重载时间 -->
        <div class="online" style="margin-top: 40px">
            <h2>在线汇率查询（仅演示，搞着玩）</h2>
            <span>转换前货币：</span><input type="text" id="v1" value="CNY" />
            <span>转换后货币：</span
            ><input type="text" id="v2" value="USD" /><br />
            <span>货币—数量：</span><input type="number" id="v3" value="100" />
            <a href="">点我去查询</a>
        </div>
    </body>
    <script></script>
</html>

less代码：

@borderStyle: 1px solid #333;
@boxLength: 300px;

* {
    margin: 0;
    padding: 0;
}
#root {
    text-align: center;
    width: @boxLength;
    margin: auto;
}
h2 {
    margin: 15px;
}
.box {
    border: @borderStyle;
    width: 100%;
    border-radius: 10px;
}
li {
    list-style: none;
    /* margin: auto; */
    padding-left: 10px;
    margin: 10px;
    height: 30px;
}
.box1 {
    border-bottom: @borderStyle;
    height: 40px;
}
.box1 input {
    height: 25px;
    text-align: right;
    border: none;
    border-bottom: @borderStyle;
    font-size: 15px;
    float: right;
}
input:focus {
    outline: none;
}

.box2 {
    height: auto;
}
.leftSpan {
    width: 40px;
    font-size: 20px;
    float: left;
}
.rightSpan {
    width: 200px;
    float: right;
    text-align: right;
}

.online {
    width: 400px;
    border: @borderStyle;
    border-radius: 20px;
}
.online > span {
    // margin-right: 25px;
    margin: 5px;
    // float: left;
}
.online > input {
    width: 15%;
    margin: 5px;
    padding-left: auto;
}

js代码：

window.onload = function () {
    console.log("Mon Jun 05 2023 08:40:00 GMT+0800 (中国标准时间)");

    const timer = setInterval(function () {
        document.querySelector("p").innerText = new Date().toLocaleString();
    }, 1000);
    let rate = {
        CNY: {
            CNY: 1,
            JPY: 16.876,
            HDK: 1.187,
            USD: 0.1526,
            EUR: 0.1294,
        },
        JPY: {
            CNY: 0.0595,
            JPY: 1,
            HDK: 0.0702,
            USD: 0.009,
            EUR: 0.0077,
        },
        HDK: {
            CNY: 0.8463,
            JPY: 14.226,
            HDK: 1,
            USD: 0.1286,
            EUR: 0.10952,
        },
        USD: {
            CNY: 6.5813,
            JPY: 110.62,
            HDK: 7.7759,
            USD: 1,
            EUR: 0.85164,
        },
        EUR: {
            CNY: 7.7278,
            JPY: 129.89,
            HDK: 9.1304,
            USD: 1.1742,
            EUR: 1,
        },
    };
    console.log(
        "CSDN链接:https://blog.csdn.net/qq_36920766?spm=1010.2135.3001.5421"
    );
    const vm = new Vue({
        el: "#root",
        data: {
            state: 1, //用于动态渲染
            currentName: "CNY",
            currentRate: 100,
            rate,
            toRate: [
                { cur: "JPY", amount: 0 },
                { cur: "HDK", amount: 0 },
                { cur: "USD", amount: 0 },
                { cur: "EUR", amount: 0 },
            ],
        },
        watch: {
            currentRate: {
                immediate: true,
                deep: true,
                handler(value) {
                    // console.dir(this);   // vue
                    this.updateRate();
                },
            },
            currentName: {
                handler(value) {
                    console.log(value + "被修改了");
                    this.updateRate();
                },
            },
        },
        methods: {
            updateRate() {
                this.toRate.forEach((item) => {
                    item.amount = this.getRate(this.currentName, item.cur);
                });
            },
            getRate(name1, name2) {
                return (rate[name1][name2] * this.currentRate * 1.0).toFixed(2);
            },
            changeCountName(event, index) {
                const temp = this.currentName;
                this.currentName = event.cur;
                // 作者:Eternity.yzy.Arrebol
                this.toRate[index].cur = temp;
                // console.log(this.currentName); // jpn
                // console.log(this.toRate[index].cur); // cny
            },
        },
    });
    document.querySelector("a").addEventListener("click", function () {
        const v1 = document.querySelector("#v1").value;
        const v2 = document.querySelector("#v2").value;
        const v3 = document.querySelector("#v3").value;
        console.log(v1, v2, v3);
        this.href =
            "https://www.xe.com/currencyconverter/convert/?Amount=" +
            v3 +
            "&From=" +
            v1 +
            "&To=" +
            v2;
    });

    console.log("作者:Eternity.Arrebol");
};

以上代码我打包好了在我的资源中，需要的可以前往下载

总结：

该内容为一篇关于使用Vue.js实现汇率计算器的案例，涉及的技术包括html5、css3、JavaScript、Less和Vue.js等。实现过程中主要包括了了解Vue.js的框架使用、使用watch监视嵌套的对象、熟悉Vue.js中this指向等内容。其中，html和Less代码用于实现页面布局和样式，JavaScript代码则主要用于实现汇率的计算和交互逻辑，而Vue.js则用于实现数据的绑定，提供更高效的开发方式。

今天的文章web学习—汇率计算器[通俗易懂]分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/68312.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注