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" @click="input('3')">3</span>
<span class="btn operator" @click="symbol('+')">+</span>
<span class="btn" @click="input('0')">0</span>
<span class="btn" @click="point('.')">.</span>
<span class="btn btn-double" @click="resultValue">=</span>
</calc-box>
</div>
</div>
<script>
  // 去掉提示
  Vue.config.productionTip = false
  
  // 计算器结果框组件
  const resultBox = {
    // 父子通信
    props: ['getValue'],
    // 计算属性
    computed: {
      value() {
        return this.getValue
      },
    },
    template: `<input id="input-box" type="text" v-model="value" readonly/>`
  }
  
  // 计算器输入面板组件
  const calcBox = {
    template: `<div id="calc-box">
                      <slot></slot>
                   </div>`
  }
  
  
  var app = new Vue({
    el: '#app',
    data() {
      return {
        inputVal: '',
        dotAdd: false,  // 是否允许输入 .
        operators: ['+', '-', 'x', '÷']
      }
    },
    
    // 组件
    components: {
      // 计算器结果框组件
      'result-box': resultBox,
      
      // 计算器输入面板组件
      'calc-box': calcBox
    },
    methods: {
      // 输入数值
      input(value) {
        this.errorValue()
        let lastChar=this.inputVal[this.inputVal.length - 1];
        let lastTwoChar=this.inputVal[this.in.........完整代码请登录后点击上方下载按钮下载查看