使用vue.js实现一款简易计算器可多则混合运算（加减乘除）

ciao1w35

于 2023-04-02 21:33:09 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ciao1w35/article/details/129917515

版权

该文章介绍了如何在Vue.js应用中使用v-model进行双向数据绑定，结合methods和计算属性实现输入表单的实时计算功能。用户输入数字和选择运算符后，通过点击按钮触发计算方法，自动计算并显示结果。

摘要由CSDN通过智能技术生成

一、普通方法

通过methods中自定义方法，然后在input表单上通过v-model进行双向绑定，实现实时更新计算结果

<div id="app">
    <input type="text" v-model="number1" placeholder="请输入第一个数">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="number2" placeholder="请输入第二个数">
    <input type="button" value="=" @click="calculator">
    <input type="text" v-model="result">
</div>

二、通过methods计算属性

将计算结果设定为一个methods计算属性，该属性与两个表单中的数字相关联，每当数字发生改变自动计算出结果。

<script type="text/javascript">
    // 创建 Vue 实例，得到 ViewModel，简写vm
    var vm = new Vue({
        el: "#app",
        data: {
            number1: 0,
            number2: 0,
            opt: '+',
            result: 0
        },
        methods: {
            //计算的方法
            calculator() {
                switch (this.opt) {
                    case '+':
                        this.result = Number(this.number1) + Number(this.number2);
                        break;
                    case '-':
                        this.result = Number(this.number1) - Number(this.number2);
                        break;
                    case '*':
                        this.result = Number(this.number1) * Number(this.number2);
                        break;
                    case '/':
                        this.result = Number(this.number1) / Number(this.number2);
                        break;
                }
            }
        }
    });
</script>