Vue计算器实例练习

计算器实例

1. 常用的加减乘除，点击=显示计算结果
2. X²、1/x ：输入任意的数字，点击 X²、1/x 计算出结果
3. 点击C清空当前内容
4. 点击✖删除末尾的字符
5. 点击结果栏，可以直接输入运算表达式

源码

1. X² 使用v-html在网页中显示
2. 点击特定的位置，执行特定的功能
3. str.substring(参数1,参数2)

• 参数1：字符串截取的起始下标，非负的整数。如果此参数是0,则是从字符串的第一个字符开始截取
• 参数2：截取结束位置的索引下标，注意：截取的结果，不包括结束位置的字符

4. eval(str)将字符串作为代码来执行，eval("2+2")的结果为4
5. 公众号“小知识酷”回复“230522Calc”获取完整源码

<table>
    <tr>
        <td colspan="4" style="padding: 0">
            <input type="text" v-model="sumValue">
        </td>
    </tr>
    <tr v-for="(value,index) in arr" :key="value">
        <td  v-for="(val,i) in value" :key="val" @click="getSum(index,i)"  @keyup.enter="print(index,i)" v-html="val"></td>
    </tr>        
</table>

data(){
    return{
        sumValue:"0",
        arr:[["x<sup>2</sup>","1/x","C","✖"],[7,8,9,"/"],[4,5,6,"*"],[1,2,3,"-"],[".",0,"=","+"]]        
    };
},
methods:{
    getSum:function(index,i){
        console.log(index+":"+i)
        if(index==0 && i==0){
            console.log(Math.pow(this.sumValue,2));
            this.sumValue = Math.pow(this.sumValue,2);
        }else if(index==0 && i==1){
            console.log(this.sumValue)
            this.sumValue = 1.0/this.sumValue;                    
        }else if(index==0 && i==2){
            this.sumValue = 0;                    
        }else if(index==0 && i==3){        
            this.sumValue = this.sumValue.substring(0, this.sumValue.length - 1);;                    
        }else if(index==4 && i==2){
            this.sumValue = "结果："+eval(this.sumValue);            
        }else if(this.sumValue == '0' || this.sumValue[0]=="结"){
            this.sumValue = this.arr[index][i].toString();
        }else if(this.sumValue != '0' && this.arr[index][i].toString()!="="){                
            this.sumValue = this.sumValue + this.arr[index][i].toString();
        }            
    },
}