vue2/vue实现简易计算器/计算器样式

最新推荐文章于 2023-12-11 17:52:14 发布

码农六六

最新推荐文章于 2023-12-11 17:52:14 发布

阅读量936

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/six6de6/article/details/127016999

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天使用vue2基础知识设计一个简易计算器

下面是计算器的样式：

HTML代码段:

<div id="box">
        <table>
            <tr>
                <td colspan="4"><input type="text" style="width: 200px" value='' v-model="rel"></td>
            </tr>
            <tr>
                <td><input type="button" value="±" @click="Negate()"></td>
                <td><input type="button" value="%" @click="Percent()"></td>
                <td><input type="button" value="del" @click="del()"></td>
                <td><input type="button" value="C" @click="clean()"></td>




            </tr>
            <tr>
                <td><input type="button" value="1" @click="add('1')"></td>
                <td><input type="button" value="2" @click="add('2')"></td>
                <td><input type="button" value="3" @click="add('3')"></td>
                <td><input type="button" value="+" @click="type('+')"></td>
            </tr>
            <tr>
                <td><input type="button" value="4" @click="add('4')"></td>
                <td><input type="button" value="5" @click="add('5')"></td>
                <td><input type="button" value="6" @click="add('6')"></td>
                <td><input type="button" value="-" @click="type('-')"></td>
            </tr>

            <tr>
                <td><input type="button" value="7" @click="add('7')"></td>
                <td><input type="button" value="8" @click="add('8')"></td>
                <td><input type="button" value="9" @click="add('9')"></td>
                <td><input type="button" value="*" @click="type('*')"></td>
            </tr>

            <tr>
                <td><input type="button" value="0" @click="add('0')"></td>
                <td><input type="button" value="." @click="spot('.')"></td>
                <td><input type="button" value="/" @click="type('/')"></td>
                <td><input type="button" value="=" v-on:click="result()"></td>

            </tr>
        </table>
    </div>

css代码段:

<style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #eee;
        }

        table {
            padding: 20px;
            /* 容器使用grid网格布局 */
            display: grid;
            /* 设置6行，每一行的高度为80px */
            grid-template-rows: repeat(6, 60px);
            /* 设置4列，每一列的宽度为80px */
            grid-template-columns: repeat(4, 70px);
            /* 每个单元格的内容 */
            grid-template-areas: "result result result result"
                "AC plus-minus percent divide"
                "num-7 num-8 num-9 multiply"
                "num-4 num-5 num-6 subtract"
                "num-1 num-2 num-3 add"
                "num-0 num-0 dot equal";

            /* 页面的阴影 */
            /* 参数：x偏移量，y偏移量，阴影模糊半径，扩散半径，阴影颜色 */
            box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1),
                8px 8px 16px -10px rgba(0, 0, 0, .15);
        }

        input {
            width: 50px;
            text-align: center;
            outline: none;
            border: none;
            margin: 8px;
            font-size: 30px;
            /* 设置阴影 */
            box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1),
                4px 4px 16px -10px rgba(0, 0, 0, 0.3);
            /* 设置背景是线性渐变 */
            background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);
            border-radius: 40px;
        }

        input:active {
            /* inset是阴影改为内部 */
            box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset,
                4px 4px 16px -10px rgba(0, 0, 0, 0.3) inset;
        }
    </style>

vue.js代码段

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: "#box",
            data: {
                rel: "",
                isDecimalAdded: false,
                //控制运算符只能点击一次
                isDecimalAdd: true,
                // 控制小数点的点击
            },

            methods: {

                //判断运算结束后的结果是否含有小数点如果有无法再次追加

                //对这个rel进行加负号的操作
                Negate() {
                    this.rel = Number(this.rel) * -1;
                },


                //进行%的操作
                Percent() {
                    this.rel = Number(this.rel) * 0.01
                },
                spot(index) {   //设置小数点

                    if (this.isDecimalAdd) {
                        if (isNaN(this.rel[this.rel.length - 1])) { //设置如果前一位字符不是数字就补全0
                            this.rel += '0.'
                            this.isDecimalAdd = false;     //不可再次点击运算符
                            this.isDecimalAdded = false;  //不可再次点击小数点
                        } else {
                            this.rel += index;
                            this.isDecimalAdd = false;
                            this.isDecimalAdded = false;

                        }

                    }

                },
                add(index) {           //这里就是按键绑定的方法，把获取到的值拼接到rel字符串上

                    if (this.rel.length == 1 && this.rel[0] == 0) {   //控制在前一位是零不是数字1-9的情况下持续输出

                        index == 0 ? console.log(0) : this.rel = index

                    }
                    else if (isNaN(this.rel[this.rel.length - 2]) && this.rel[this.rel.length - 1] == 0 && index !== 0) {  //控制零的前一位字符是零和前一位字符不是数字的情况下持续输出
                  
                        this.rel = this.rel.slice(0, this.rel.length - 1);    //字符串截取
                        this.rel += index;

                    } else if (isNaN(this.rel[this.rel.length - 3]) && this.rel[this.rel.length - 1] == 0 && index == 0) { //控制零的前一位字符是零后面也是零的情况下输出

                        this.rel = this.rel.slice(0, this.rel.length - 2);    //字符串截取
                        this.rel += index;

                    }
                    else {
                        this.rel += index;
                        this.isDecimalAdded = true;
                        console.log(34);

                    }

                },

                type(index) {                    //控制运算符  
                    if (this.isDecimalAdded) {
                        this.rel += index;
                        this.isDecimalAdded = false;  //不可连续点击运算符
                        this.isDecimalAdd = true;
                    };
                },
                result() {

                    this.rel = String(parseFloat(eval(this.rel).toPrecision(12)));//这里是用eval方法进行一个计算然后处理数字精确问题
                    this.rel.indexOf(".") == -1 ? this.isDecimalAdd = true : this.isDecimalAdd = false; //判断运算结束后的结果是否含有小数点如果有无法再次追加
                    console.log(this.rel);
                    if (isNaN(this.rel)) {
                        this.rel = ''
                    }

                },
                del() {
                    this.rel = this.rel.substring(0, this.rel.length - 1);
                    this.rel.indexOf(".") == -1 ? this.isDecimalAdd = true : this.isDecimalAdd = false; //判断运算结束后的结果是否含有小数点如果有无法再次追加
                    this.rel.indexOf(".") == -1 ? this.isDecimalAdded = true : this.isDecimalAdded = false; //判断删除结束后的结果是否含有运算符如果有无法再次追加
                },
                clean() {
                    this.rel = "";

                    this.rel.indexOf(".") == -1 ? this.isDecimalAdd = true : this.isDecimalAdd = false;
                    this.rel.indexOf(".") == -1 ? this.isDecimalAdded = true : this.isDecimalAdded = false; 
                }
            }
        })
    </script>

引用的https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js是开发环境版本代码，包含了有帮助的命令行警告，也可自己去官网下载到自己的文件夹中然后引用

下面是实现效果