基于VUE写的简易计算器（带面板）

根据上一版基于js的简易计算器改的

 

 完整代码：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7         
  8         <style type="text/css">
  9             #box_1{
 10                 width: 140px;
 11             }
 12             #box_1 input{
 13                 width: 130px;
 14             }
 15             .butt{
 16                 width: 140px;
 17             }
 18             .wid_30{
 19                 width: 30px;
 20                 border: 0;
 21                 font-size: 16px;
 22             }
 23         </style>
 24         
 25     </head>
 26     <body>
 27         
 28         <div id="box_1">
 29             <input type="text" id="" value="" v-model="inputValue"/>
 30             <input type="text" id="" value="" v-model="grossValue" />
 31                 
 32             <div class="butt">
 33                         
 34                 <button type="button" class="wid_30" style="color: #fff;background-color: red;" v-on:click="dele()">AC</button>
 35                         
 36                 <button type="button" class="wid_30" v-on:click="add('+')">+</button>
 37                 
 38                 <button type="button" class="wid_30" v-on:click="add('-')">-</button>
 39                 
 40                 <button type="button" class="wid_30" v-on:click="add('x')">x</button>
 41                 
 42                 <button type="button" class="wid_30" v-on:click="add(1)">1</button>
 43                 <button type="button" class="wid_30" v-on:click="add(2)">2</button>
 44                 <button type="button" class="wid_30" v-on:click="add(3)">3</button>
 45     
 46                 <button type="button" class="wid_30" v-on:click="add('/')">/</button>
 47                 
 48                 <button type="button" class="wid_30" v-on:click="add(4)">4</button>
 49                 <button type="button" class="wid_30" v-on:click="add(5)">5</button>
 50                 <button type="button" class="wid_30" v-on:click="add(6)">6</button>
 51                 
 52                 <button type="button" class="wid_30" v-on:click="add('.')">.</button>
 53                 
 54                 <button type="button" class="wid_30" v-on:click="add(7)">7</button>
 55                 <button type="button" class="wid_30" v-on:click="add(8)">8</button>
 56                 <button type="button" class="wid_30" v-on:click="add(9)">9</button>
 57                 
 58                 <button type="button" class="wid_30" v-on:click="add(0)">0</button>
 59 
 60                 <button type="button" style="width: 134px;border: 0;" v-on:click="evaluation()">=</button>
 61                 
 62             </div>
 63             
 64         </div>
 65         
 66         
 67         <script type="text/javascript">
 68             
 69             var vm = new Vue({
 70                 el: '#box_1',
 71                 data:{
 72                     inputValue: '',
 73                     result: [],
 74                     cache: 0,
 75                     grossValue: ''
 76                 },
 77                 methods:{
 78                     add: function(x){
 79                         this.inputValue = this.inputValue + x;
 80                     },
 81                     dele: function(){
 82                         this.inputValue = '';
 83                         this.grossValue = '';
 84                     },
 85                     
 86                     evaluation: function(){
 87                         //将输入框中的值（字符串）拆解并存入数组中
 88                         for(var i = 0;i < this.inputValue.length;i++){
 89                             this.result.push(this.inputValue.charAt(i));
 90                         }
 91                         this.calculation(); //调用运算方法
 92                         this.result[0] = this.result[0].toFixed(3); //保留3位小数
 93                         this.grossValue = this.result[0];
 94                         this.result = [];  //归零
 95                     },
 96                     
 97                     calculation: function(){
 98                         //将多位数（字符串单个字符）转化为整体  "5""6" ==> "56"
 99                         for(var i = 1; i < this.result.length; i++){
100                             if(this.result[i] != "+" && this.result[i] != "-" && this.result[i] != "x" && this.result[i] != "/"){
101                                 if(this.result[i-1] != "+" && this.result[i-1] != "-" && this.result[i-1] != "x" && this.result[i-1] != "/"){
102                                     this.cache = this.result[i-1] + this.result[i];  //合并多位数 "5""6" ==> "56"
103                                     this.result[i-1] = this.cache;  //将整理过的数放入数组中
104                                     this.result.splice(i,1);  //整理已经整合过的数
105                                     this.calculation();  //再次调用自身以便检查是否有遗漏
106                                 }
107                             }
108                         }
109                         //乘法运算
110                         for(var i = 0;i < this.result.length;i++){
111                             if(this.result[i] === "x"){
112                                 this.cache = this.result[i-1] * this.result[i+1];
113                                 this.result[i-1] = this.cache;
114                                 this.result.splice(i,2);  //删掉数组中已经运算过的数与运算符号
115                                 this.calculation();
116                             }
117                         }
118                         //除法运算
119                         for(var i = 0;i < this.result.length;i++){
120                             if(this.result[i] === "/"){
121                                 this.cache = this.result[i-1] / this.result[i+1];
122                                 this.result[i-1] = this.cache;
123                                 this.result.splice(i,2);
124                                 this.calculation();
125                             }
126                         }
127                         //加法运算
128                         for(var i = 0; i < this.result.length;i++){
129                             if(this.result[i] === "+"){
130                                 this.cache = this.result[i-1] *1 + this.result[i+1] *1;  //乘 1 是为了在加减法中将字符型转为数值型运算，否则将会是级联
131                                 this.result[i-1] = this.cache;
132                                 this.result.splice(i,2);
133                                 this.calculation();
134                             }
135                         }
136                         //减法运算
137                         for(var i = 0; i < this.result.length;i++){
138                             if(this.result[i] === "-"){
139                                 this.cache = this.result[i-1] * 1 - this.result[i+1] * 1;
140                                 this.result[i-1] = this.cache;
141                                 this.result.splice(i,2);
142                                 this.calculation();
143                             }
144                         }
145                         
146                     }
147                 }
148             })
149             
150         </script>
151         
152         
153         
154     </body>
155 </html>

 

posted @ 2020-10-16 17:14  犹枕南柯  阅读(407)  评论(0)    收藏  举报