Vue-简易计算器

最新推荐文章于 2024-04-19 16:48:39 发布

uuuuuuou

最新推荐文章于 2024-04-19 16:48:39 发布

阅读量384

点赞数 1

文章标签： vue.js npm express

本文链接：https://blog.csdn.net/uuuuuuou/article/details/127526065

版权

1、通过v-model指令实现数值a和数值b的绑定

2、给计算按钮绑定事件，实现计算逻辑

3、将计算结果绑定到对应的位置

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .item {
            cursor: pointer;
        }

        .item:hover {
            background: #ccc;
        }

        .container_box {
            display: flex;
            flex-wrap: wrap;
            width: 186px;
            height: 248px;
            float: left;
            box-sizing: border-box;
        }

        .container_box .item {
            width: 60px;
            height: 60px;
            font-size: 24px;
            text-align: center;
            border: 1px solid #000;
            line-height: 60px;
            color: #333;
        }

        .btns {
            width: 60px;
            height: 248px;
            float: left;
        }

        .btns .item {
            width: 60px;
            height: 60px;
            font-size: 24px;
            text-align: center;
            border: 1px solid #000;
            line-height: 60px;
            color: #333;
            width: 60px
        }

        .res {
            width: 116px;
            height: 30px;
            border: 1px solid #000;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            margin-top: 5px;
        }

        .res:hover {
            background: #ddd
        }

        .sign {
            margin-top: 20px;
            font-size: 28px;
            font-weight: bold;
            padding: 15px;
            color: rgb(0, 119, 167);
        }

        .clearfix::after {
            content: '.';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 数值和运算符 -->
        <div class="opa clearfix">
            <!-- 数值 -->
            <div class="container_box" @click="getValue">
                <div class="item">7</div>
                <div class="item">8</div>
                <div class="item">9</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">0</div>
                <div class="item" style="width:122px">.</div>
            </div>
            <!-- 运算符 -->
            <div class="btns" @click="getSign">
                <div class="item">+</div>
                <div class="item">-</div>
                <div class="item">*</div>
                <div class="item">/</div>
            </div>
        </div>
        <div class="wrap">
            <div class="res" @click="getReset">重置</div>
            <div class="res" @click="getRel">计算</div>
        </div>
        <div class="sign">
            <span>{{num1}}</span>
            <span>{{sign}}</span>
            <span>{{num2}}</span>
            <span>{{equal}}</span>
            <span>{{rel}}</span>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num1: '',
                sign: '',
                num2: '',
                equal: '',
                rel: '',
                flag: false
            }, methods: {
                getValue(e) {
                    if (!this.flag) {
                        this.num1 += e.target.innerText
                    }
                    if (this.flag) {
                        this.num2 += e.target.innerText
                    }
                },
                getSign(e) {
                    this.flag = true;
                    this.sign = e.target.innerText
                },
                getRel() {
                    this.equal = '=';
                    switch (this.sign) {
                        case '+':
                            this.rel = Number(this.num1) + Number(this.num2);
                            break;
                        case "-":
                            this.rel = this.num1 - this.num2;
                            break;
                        case "*":
                            this.rel = this.num1 * this.num2;
                            break;
                        case "/":
                            this.rel = this.num1 / this.num2;
                            break;
                        default:
                            this.rel = '空';
                            break;
                    }
                },
                getReset() {
                    this.num1 = '';
                    this.num2 = '';
                    this.sign = '';
                    this.rel = '';
                    this.equal = '';
                    this.flag = false;
                }
            }
        })
    </script>
</body>

</html>