0
点赞
收藏
分享

微信扫一扫

Vue实现计算器

<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>

Vue实现计算器_Vue

举报

相关推荐

0 条评论