vue-项目试手(1) 计算器(2)获取结果

还有一些细节处理不细说。基本都是字符串处理

处理结果函数编写

calc(){
                //替换算符
                const strValue=this.resultValue.replace('x','*').replace('÷','/')
                //计算
                this.resultValue=eval(strValue)
            }

总体代码

基本上最复杂的就是字符串处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>迷你计算器</title>
    <style>
        body{
            margin: 20px;
        }
        #app{
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 175px;
            height: 285px;
            padding: 10px;
        }
        #input-box{
            width: 161px;
            margin-bottom: 10px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 2px;
            background-color: white;
            color: #666;
            padding: 0 5px;
            text-align: right;
        }
        #app .btn{
            width: 40px;
            height: 35px;
            border: 1px solid #ccc;
            border-radius: 2px;
            cursor: pointer;
            background-color: white;
            font-weight: bold;
            color: #666;
            margin-bottom: 10px;
        }
        #app .btn:hover{
            background-color: #333;
            color: white;
        }
        #app .btn-double{
            width: 84px;
        }
    </style>
</head>
<body>

<div id="app">
    <result-box :get-value="resultValue"></result-box>
    <calc-box>
        <button class="btn" @click="clear">C</button>
        <button class="btn" @click="sign">+/-</button>
        <button class="btn" @click="symbol('x')">x</button>
        <button class="btn" @click="symbol('÷')">÷</button>
        <button class="btn" @click="input('1')">1</button>
        <button class="btn" @click="input('2')">2</button>
        <button class="btn" @click="input('3')">3</button>
        <button class="btn" @click="symbol('-')">-</button>
        <button class="btn" @click="input('4')">4</button>
        <button class="btn" @click="input('5')">5</button>
        <button class="btn" @click="input('6')">6</button>
        <button class="btn" @click="symbol('+')">+</button>
        <button class="btn" @click="input('7')">7</button>
        <button class="btn" @click="input('8')">8</button>
        <button class="btn" @click="input('9')">9</button>
        <button class="btn" @click="symbol('%')">%</button>
        <button class="btn" @click="input('0')">0</button>
        <button class="btn" @click="point()">.</button>
        <button class="btn btn-double" @click="calc">=</button>
    </calc-box>

</div>

<script src="../js/vue.js"></script>
<script>
    //计算器结果框组件
    const resultBox={
        //父子通信
        props:['getValue'],
        //计算属性
        computed:{
            value(){
                return this.getValue;
            }
        },
        template:`
           <input id="input-box" type="text" v-model="value" readonly>
        `
    }
    //计算器输入组件面板组件
    const calcBox={
        template:`
            <div id="calc-box">
                <slot></slot>
            </div>
        `
    }
    const app =new Vue({
        el:'#app',
        data:{
            resultValue:0
        },
        //组件
        components:{
            //计算器结果框组件
            'result-box':resultBox,
            //计算器输入组件面板组件
            'calc-box': calcBox
        },
        methods:{
            input(params){
                //拒绝重复0,并且防止0.x 被当0处理
                if(parseInt(this.resultValue)===0 && !/0[\.|\s]/.test(this.resultValue)){
                    //转化成数字是0 就直接替换掉
                    this.resultValue=params
                }
                else {
                    this.resultValue+=params
                }
            },
            //加减乘除算术公式
            symbol(params){
                this.resultValue+=' '+params+' '
            },
            //正负号设置
            sign(){
                const strValue=this.toStr()
                //得到最后一位数值
                let lastNumber=strValue.substring(strValue.lastIndexOf(' '))
                //得到之前的数值+符号
                let preNumber=strValue.substr(0,strValue.lastIndexOf(' '))
                //判断是否有负号
                if(lastNumber.indexOf('-')===-1){
                    lastNumber=' -'+lastNumber.trim()
                }
                else {
                    lastNumber=' '+lastNumber.trim().substr(1)
                }
                this.resultValue=preNumber+lastNumber
            },
            //处理小数点
            point(){
                const strValue=this.toStr()
                //得到最后一位数值
                const lastNumber=strValue.substring(strValue.lastIndexOf(' '))
                //判断是否有小数点
                if(lastNumber.indexOf('.')!==-1){
                    return
                }
                else{
                    this.resultValue+='.'
                }
            },
            //转化成字符串
            toStr(){
                return this.resultValue.toString()
            },
            clear(){
                this.resultValue='0'
            },
            //处理结果
            calc(){
                //替换算符
                const strValue=this.resultValue.replace('x','*').replace('÷','/')
                //计算
                this.resultValue=eval(strValue)
            }
        }
    })
</script>
</body>
</html>

效果:

posted @ 2021-08-01 21:42  一个经常掉线的人  阅读(14)  评论(0编辑  收藏  举报