Vue实现计算器（一看就懂）

我是码农lyc

已于 2022-07-27 13:16:42 修改

阅读量5.9k

点赞数 14

文章标签： vue.js javascript 前端

于 2022-02-23 17:16:31 首次发布

本文链接：https://blog.csdn.net/Lycxiaobai/article/details/123094818

版权

在这里插入图片描述

这个计算器其实是我老师布置的一个作业，捉摸着搞了那么久的东西不能浪费了吧，于是我分享下我的代码和大概思路

给个关注点个赞，后续我会分享更多我们学生党的作业问题
白嫖党们先看代码，我就先上上全代码，干！

<head>
    <meta charset="UTF-8">
    <title>计算器</title>

    <!-- 引入Vue -->
        <script type="text/javascript" src="../jquery.js"></script>
        <script type="text/javascript" src="../vue.js"></script>
</head>
<!-- input框中内容从右边显示 -->
    <style>
        input{
            width: 327px;
            height: 80px;
            font-size: 50px;
            text-align: right;
        }
        button{
            width: 80px;
            height: 80px;
        }  
    </style>
<body>
    <!-- 设置输入框的长度和大小 -->
<div id="root" class="root">
    <input id="inputs" type="text" placeholder="0" disabled="disabled" v-model="zhi">
        <!-- 设置按键的宽和高 -->
        <div id="forcat" >
            <button @click="cls()"  >AC</button>
            <button @click="zhengfu('')"  >+/-</button>
            <button @click="tuige()" >⬅</button>
            <button @click="addStr('/')"  >÷</button><br>
            <button @click="addStr(7)"  >7</button>
            <button @click="addStr(8)"  >8</button>
            <button @click="addStr(9)"  >9</button>
            <button @click="addStr('*')">×</button><br>
            <button @click="addStr(4)"  >4</button>
            <button @click="addStr(5)"  >5</button>
            <button @click="addStr(6)"  >6</button>
            <button @click="addStr('-')"  >-</button><br>
            <button @click="addStr(1)"   >1</button>
            <button @click="addStr(2)"  >2</button>
            <button @click="addStr(3)"  >3</button>
            <button @click="addStr('+')"  >+</button><br>
            <button @click="addStr(0)" style="width: 165px; height: 80px;" >0</button>
            <button @click="addStr('.')"  >.</button>
            <button @click="calc()"  style="background-color:cornflowerblue;" >=</button>
    </div>
</div>
    <script type="text/javascript">
        // 这两行代码可以略过（Vue中的配置，不一定每个人都要）
            Vue.config.productionTip = false;
            Vue.config.devtools = true;
            new Vue({
                el:'#root',
                data:{
                    zhi:"",
                },
                methods:{
                	//  在这里也可以直接使用this.
                    //  在input框内可以输入值
                    addStr:function(s){
                        var vars = document.getElementById("inputs");
                        vars.value = vars.value + s;                                
                    },
                    //    计算input框内输入的值计算加减乘除
                    calc:function(){
                        var vars = document.getElementById("inputs");
                        val = eval(vars.value);
                        vars.value = val;
                    },
                    // input框内删减，退格
                    tuige:function(){              
                        this.zhi = this.zhi.substr(0,this.zhi.length-1);
                    },
                    //    清除input框中的内容
                    cls:function(){
                        var vars = document.getElementById("inputs");
                        vars.value = "";
                    },
                    //    每次点击正负值都会 * -1
                    zhengfu:function(){
                        var vars = document.getElementById("inputs");
                        var str = vars.value * -1;
                        vars.value = str;
                    }                
                }
            });
    </script>
</body>
<html>

测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行

我是码农lyc

关注

14
点赞
踩
56

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue实现计算器（一看就懂）

**这个计算器其实是我老师布置的一个作业，捉摸着搞了那么久的东西不能浪费了吧，于是我分享下我的代码和大概思路**给个关注点个赞，后续我会分享更多我们学生党的作业问题白嫖党们先看代码，我就先上上全代码，干！<!DOCTYPE html><head> <meta charset="UTF-8"> <title>计算器</title>  <script t
复制链接

扫一扫