基于Vue前端框架的一个简单的网页计算器_前端做计算公式计算器-优快云博客

本文链接：https://blog.youkuaiyun.com/AAAHTAAA/article/details/130514659

这是一个使用Vue.js框架编写的简单计算器应用，主要利用了v-model和v-on指令来绑定数据和处理用户输入。代码中实现了数字按钮点击、运算符选择、清除功能以及计算结果的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还在学习阶段，代码很粗糙，请大佬们指正，也希望能给其他正在学习Vue的人一点启发

Vue的代码只用到了v-model和v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器plus</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input style="height: 50px;width: 220px" v-model="result" type="text"><br>
    <input type="button" @click="flag(7)" value="7" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag(8)" value="8" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag(9)" value="9" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="clear()" value="C" style="height: 50px ;width: 50px">&nbsp;
    <br>
    <input type="button" @click="flag(4)" value="4" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag(5)" value="5" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag(6)" value="6" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag('-')" value="-" style="height: 50px ;width: 50px">&nbsp;
    <br>
    <input type="button" @click="flag(1)" value="1" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag(2)" value="2" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag(3)" value="3" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag('+')" value="+" style="height: 50px ;width: 50px">&nbsp;
    <br>
    <input type="button" @click="flag('/')" value="÷" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag(0)" value="0" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="flag('*')" value="*" style="height: 50px ;width: 50px">&nbsp;
    <input type="button" @click="count()" value="=" style="height: 50px ;width: 50px">&nbsp;
    <br>
    <input type="text" v-model="firstNum" ><br>
    <input type="text" v-model="symbol" ><br>
    <input type="text" v-model="lastNum" ><br>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            firstNum: "",
            symbol: "",
            lastNum: "",
            result: ""
        },
        methods: {
            flag(e) {
                if (this.symbol == "") {
                    if (e != "+" && e != "-" && e != "*" && e != "/" && e != "C") {
                        this.firstNum += e
                        this.result += e
                    } else {
                        this.symbol = e
                        this.result += e
                    }
                } else if (e != "+" && e != "-" && e != "*" && e != "/" && e != "C") {
                    this.lastNum += e
                    this.result += e
                } else {
                    switch (this.symbol) {
                        case '+':
                            this.result = Number(this.firstNum) + Number(this.lastNum)
                            this.firstNum = this.result
                            this.symbol = e
                            this.lastNum = ""
                            break
                        case '-':
                            this.result = Number(this.firstNum) - Number(this.lastNum)
                            this.firstNum = this.result
                            this.symbol = e
                            this.lastNum = ""
                            break
                        case '*':
                            this.result = Number(this.firstNum) * Number(this.lastNum)
                            this.firstNum = this.result
                            this.symbol = e
                            this.lastNum = ""
                            break
                        case '/':
                            this.result = Number(this.firstNum) / Number(this.lastNum)
                            this.firstNum = this.result
                            this.symbol = e
                            this.lastNum = ""
                            break
                    }
                    this.result += this.symbol
                }
            },
            count() {
                switch (this.symbol) {
                    case '+':
                        this.result = Number(this.firstNum) + Number(this.lastNum)
                        this.firstNum = this.result
                        this.symbol = ""
                        this.lastNum = ""
                        break
                    case '-':
                        this.result = Number(this.firstNum) - Number(this.lastNum)
                        this.firstNum = this.result
                        this.symbol = ""
                        this.lastNum = ""
                        break
                    case '*':
                        this.result = Number(this.firstNum) * Number(this.lastNum)
                        this.firstNum = this.result
                        this.symbol = ""
                        this.lastNum = ""
                        break
                    case '/':
                        this.result = Number(this.firstNum) / Number(this.lastNum)
                        this.firstNum = this.result
                        this.symbol = ""
                        this.lastNum = ""
                        break
                }
            },
            clear() {
                this.firstNum = ""
                this.symbol = ""
                this.lastNum = ""
                this.result = ""
            }
        }
    })
</script>
</html>