Vue实现简易计算器

最新推荐文章于 2023-04-02 18:46:11 发布

1 2 3 一起追梦

最新推荐文章于 2023-04-02 18:46:11 发布

阅读量2.3k

点赞数 1

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_41720578/article/details/124945509

版权

主要采用了javascript中的eval函数和vue.js中的v-for 和v-model来实现计算器，其中处理括号的部分采用栈的特点处理。

<head>
    <title>Title</title>
//引入vue
    <script type="text/javascript" src="js/vue.js"></script>
//简单设置下样式
    <style>
        #app{
            width: 420px;
            border: 1px solid;
        }
        #app>div button{
            margin: 2px;
            width: 100px;
            height: 80px;
            border: none;
        }
    </style>
</head>
<body>
    <div id="app">
            <div>
                <input type="text" v-model="expression" readonly="true">
            </div>
            <div>
                //item代表数组内的元素 index对应相应下标
                <template v-for="(item,index) in num">
                    <button @click="display(index)">{{item}}</button>
                </template><template v-for="(item,index) in sign">
                <button @click="display1(index)">{{item}}</button>
            </template>
            </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                result:0,
                expression:'0',
                num:['0','1','2','3','4','5','6','7','8','9'],
                sign:['(',')','%','C','/','+','-','.','=','*'],
                isFirst:true
            },
            methods:{
                display:function (index) {
                    if(this.isFirst){
                        this.expression=this.num[index];
                        this.isFirst=false;
                    }else{
                        this.expression+=this.num[index];
                    }
                },
                display1:function (index) {
                    if(this.isFirst && this.sign[index]==='('){
                        this.expression=this.sign[index];
                        this.isFirst=false;
                    }else{
                        if(this.sign[index]==='='){
                           this.expression=this.calc(this.expression);
                        }else if(this.sign[index]==='C'){
                            this.expression='0';
                            this.isFirst=true;
                        }else{
                            this.expression+=this.sign[index];
                        }
                    }
                },
                calc:function (expression) {
           
                    var index=this.expression.split("");
                    var stack=[];
                    var calc="";//存储算式
                    var count="";//临时存储结果
                    for(var i=0;i<index.length;i++){
                        if(index[i]===')'){
                            for(var j=stack.length-1;j>=0;j--){
                            //通过栈来把括号一层一层分离
                            //eval是计算表达式类似1+2*4
                                if(stack[j]==='('){
                                    stack.pop();
                                    stack.push((-eval(count)));
                                    break;
                                }
                                count+=stack.pop();
                            }
                        }else{
                            stack.push(index[i]);
                        }
                    }
                    for(var i=0;i<stack.length;i++){
                        calc+=stack[i];
                    }

                    return eval(calc);
                }
            }
        })
    </script>
</body>