VUE实现计算机

最新推荐文章于 2024-11-13 11:52:56 发布

阿霜ovo

最新推荐文章于 2024-11-13 11:52:56 发布

阅读量69

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45323410/article/details/129927335

版权

本文介绍如何利用Vue.js框架来实现一个计算机模拟程序，探讨了如何利用Vue的组件化特性和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>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="请输入第一个操作数" v-model.number="num1" />
        <select v-model="opt">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第一个操作数" v-model.number="num2" />
        <button @click="xxx">计算</button><br>
        methods方法:<strong>{{result}}</strong> <br>
        computed计算属性:<strong>{{yyy}}</strong> <br>
        watch监听器:<strong>{{ans}}</strong>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            num1: 0,
            num2: 0,
            ans: 0,
            result: 0,
            opt: "+"
        },
        methods: {//使用方法
            xxx() {
                this.result = eval(this.num1 + this.opt + this.num2);
                /* switch (this.opt) {
                    case "+":
                        this.result = this.num1 + this.num2;
                        break;
                    case "-":
                        this.result = this.num1 - this.num2;
                        break;
                    case "*":
                        this.result = this.num1 * this.num2;
                        break;
                    case "/":
                        this.result = this.num1 / this.num2;
                        break;
                } */
            }
        },
        computed: {//计算属性
            yyy() {
                return eval(this.num1 + this.opt + this.num2);
                /* switch (this.opt) {
                    case "+":
                        return this.num1 + this.num2;
                    case "-":
                        return this.num1 - this.num2;
                    case "*":
                        return this.num1 * this.num2;
                    case "/":
                        return this.num1 / this.num2;
                } */
            }
        },
        watch: {//监听器
            num1(newNum, oldNum) {
                console.log("num1:", oldNum, newNum);
                this.ans = eval(this.num1 + this.opt + this.num2);
            },
            num2(newNum, oldNum) {
                console.log("num2:", oldNum, newNum);
                this.ans = eval(this.num1 + this.opt + this.num2);
            },
            opt(newOpt, oldOpt) {
                console.log("opt:", oldOpt, newOpt);
                this.ans = eval(this.num1 + this.opt + this.num2);
            }
        }
    });
</script>

</html>