其他分享
首页 > 其他分享> > Vue实现的mini计算器

Vue实现的mini计算器

作者:互联网

跟李炎恢老师的教程一步一步实现的一个mini计算器

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷你计算器</title>
    <style>
        body{
            margin: 20px;
        }

        #app{
            border : 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            width:175px;
            height: 305px;
        }
        #input-box{
            text-align: right;
            width: 155px;
            height: 20px;
            border: 1px solid #ccc;
            border: radus 2%;
            padding: 10px;
            margin-bottom: 10px;
            background-color: white;
            color: #666;
        }

        #app .btn{
            width:40px;
            height: 40px;
            border : 1px solid #ccc;
            border-radius: 2px;
            background-color: white;
            margin-bottom: 10px;
            cursor: pointer;
            color:#666;
            font-weight: bold;
        }

        #app .btn-double{
            width: 84px;
        }

        #app .btn:hover{
            background-color: #333;
            color:white;
        }
    </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('×')">×</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="calculate()">=</button>
    </calc-box>
</div>

<script   src="./js/vue.js"></script>

<script>
    
    //去掉提示
    Vue.config.productionTip = false

    //计算器结果框组件
    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>
        `
    }

    //Vue实例
    const app =  new Vue({
        el : '#app',
        data : {
            resultValue : 0
        },

        //组件
        components : {
            //计算器结果框组件
            'result-box' : resultBox,
            'calc-box' : calcBox
        },

        //方法
        methods: {
            //输入数值
            input(param){
                //拒绝开始0和反复0,并且防止0.这种被和谐掉
                if(parseInt(this.resultValue) === 0  &&  !/0[\.|\s]/.test(this.resultValue)){
                    this.resultValue = param
                }else{
                    this.resultValue +=param
                }
            },

            //加减乘除算术公式
            symbol(param){
                this.resultValue += ' ' + param + ' '
            },

            //处理小数点
            point(param){
                //转换成字符串
                const strValue = this.toStr()

                //得到最后一位数值
                const lastNumber = strValue.substring(strValue.lastIndexOf(' '))

                //判断是否已存在小数点
                if (strValue.indexOf('.') !== -1){
                   return 
                } else {
                    this.resultValue += '.'
                }
            },

            //正负号设置
            sign(){
                //转换字符串
                const strValue = this.toStr()

                //得到最后一位数值
                let lastNumber = strValue.substring(strValue.lastIndexOf(' '))

                //得到之前的数值+符号
                let prevNumber = strValue.substr(0,strValue.lastIndexOf(' '))

                //判断当前是否有正负号
                if (lastNumber.indexOf('-') === -1){
                    lastNumber = ' -' + lastNumber.trim()
                } else {
                    lastNumber = ' ' + lastNumber.trim().substr(1)
                }

                //合并
                this.resultValue = prevNumber + lastNumber
            },

            //计算结果
            calculate(){
                try{
                    //替换运算符符号
                    const strValue = this.resultValue.replace('×','*').replace('÷','/')
                    //计算
                    this.resultValue =  eval(strValue)
                }catch(e){
                    alert('无法正确计算!')
                }
            },

            //转换成字符串
            toStr(){
                return this.resultValue.toString()
            },

            clear(){
                this.resultValue = '0'
            }
        },
    })
</script>


</body>
</html>

 

标签:lastNumber,Vue,const,mini,color,resultValue,param,strValue,计算器
来源: https://www.cnblogs.com/GarfieldTom/p/15020137.html