vue实现一个简易的计算器效果代码-html代码-BFW代码库

vue实现一个简易的计算器效果代码

代码语言：html

所属分类：其他

代码描述：vue实现一个简易的计算器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<title>vue计算器</title>
<style>
    
    #app {
      width: 280px;
      padding: 20px 20px 10px;
      border-radius: 4px;
      margin: 100px auto;
      background: #94eacb;
      box-shadow: 0 4px #21bd86, 0 10px 15px rgba(0,0,0,.2);
      box-sizing: border-box;
    }
    
    #input-box {
      display: block;
      width: 100%;
      height: 46px;
      margin-bottom: 15px;
      border:none;
      border-radius: 2px;
      background: #77baa2;
      box-shadow: 0 4px #21bd86 inset;
      padding: 0 5px;
      text-align: right;
      font-size: 20px;
      color: #fff;
      font-weight: bold;
      letter-spacing: 1px;
    }
    
    #calc-box{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    #calc-box .btn {
      width: 52px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 2px;
      cursor: pointer;
      background: #fff;
      font-weight: bold;
      color: #666;
      margin-bottom: 12px;
      box-shadow: 0 4px rgba(0,0,0,.2);
    }
    
    
    #app .btn-double {
      width: 115px;
      background: #ffc690;
      box-shadow: 0 4px #ab7c50;
    }
    
    #app .clear{
      background: #ff94e6;
      box-shadow: 0 4px #d631af;
      color: #fff;
    }

    #app .operator {
      background: #fbeafb;
    }

    #app .back {
      background: #f1ff98;
      box-shadow: 0 4px #9da858;
    }
   
    
  </style>
</head>
<body>
<div id="app">
<div>
<result-box :get-value="inputVal"></result-box>
<calc-box>
<span class="btn clear" @click="inputVal=''">C</span>
<span class="btn back" @click="back">←</span>
<span class="btn operator" @click="percent">%</span>
<span class="btn operator" @click="symbol('÷')">÷</span>
<span class="btn" @click="input('7')">7</span>
<span class="btn" @click="input('8')">8</span>
<span class="btn" @click="input('9')">9</span>
<span class="btn operator" @click="symbol('x')">x</span>
<span class="btn" @click="input('4')">4</span>
<span class="btn" @click="input('5')">5</span>
<span class="btn" @click="input('6')">6</span>
<span class="btn operator" @click="symbol('-')">-</span>
<span class="btn" @click="input('1')">1</span>
<span class="btn" @click="input('2')">2</span>
<span class="btn&q.........完整代码请登录后点击上方下载按钮下载查看