Vue实现手机计算器


Posted in Javascript onAugust 17, 2020

本文实例为大家分享了Vue制作仿手机计算器的具体代码,供大家参考,具体内容如下

1.首先是把样式做出来,按钮是0-9,还有加减乘除,百分号,清除按钮,小数点,等号、等等

Vue实现手机计算器

2.把官方网站的JS插件引用,cn.vuejs.org/v2/guide/

Vue实现手机计算器

页面视图

Vue实现手机计算器

JS

Vue实现手机计算器

Vue实现手机计算器

Vue实现手机计算器

new Vue({
   el: "#app",
   data: {
    equation: '0',
    isDecimalAdded: false, //防止在一组数字中间输入超过一个小数位
    isOperatorAdded: false, //判断之否已点击 加、减、乘、除,防止连续点击超过一个运算符号
    isStarted: false, //判断计算器是否已经开始输入数字,用于正负数和百分比计算的时候作一些判断
   },
   methods: {
    //Check if the character is + - × ÷
    isOperator(character) { //用来判断character 是否加减乘除
     return ['+', '-', '×', '÷'].indexOf(character) > -1
    },
    append(character) { //append(character)加减乘除
     if (this.equation === '0' && !this.isOperator(character)) {
      if (character === '.') {
       this.equation += '' + character
       this.isDecimalAdded = true
      } else {
       this.equation = '' + character
      }
      this.isStarted = true
      return
     }

     if (!this.isOperator(character)) {
      if (character === '.' && this.isDecimalAdded) {
       return
      }

      if (character === '.') {
       this.isDecimalAdded = true
       this.isOperatorAdded = true
      } else {
       this.isOperatorAdded = false
      }
      this.equation += '' + character
     }

     if (this.isOperator(character) && !this.isOperatorAdded) {
      this.equation += '' + character
      this.isDecimalAdded = false
      this.isOperatorAdded = true
     }
    },
    calculate() { //等于号的时候
     let result = this.equation.replace(new RegExp('×', 'g'), '*').replace(new RegExp('÷', 'g'), '/')
     this.equation = parseFloat(eval(result).toFixed(9)).toString()
     this.isDecimalAdded = false
     this.isOperatorAdded = false
    },
    calculateToggle() { //点击正负号
     if (this.isOperatorAdded || !this.isStarted) {
      true
     }

     this.equation = this.equation + '* -1'
     this.calculate()
    },
    calculatePercentage() { //点击百分比
     if (this.isOperatorAdded || !this.isStarted) {
      true
     }

     this.equation = this.equation + '* 0.01'
     this.calculate()
    },
    clear() { //点击AC
     this.equation = '0'
     this.isDecimalAdded = false //防止在一组数字中间输入超过一个小数位
     this.isOperatorAdded = false //判断之否已点击 加、减、乘、除,防止连续点击超过一个运算符号
     this.isStarted = false //判断计算器是否已经开始输入数字,用于正负数和百分比计算的时候作一些判断
    }
   }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
javascript中Number的方法小结
Nov 21 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
Vuex实现购物车小功能
Aug 17 #Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 #Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 #Javascript
Vue如何将页面导出成PDF文件
Aug 17 #Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 #Javascript
You might like
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python2.x与Python3.x的区别
2016/01/14 Python
python装饰器代替set get方法实例
2019/12/19 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
python文件读取失败怎么处理
2020/06/23 Python
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
六一节目主持词
2014/04/01 职场文书
村庄绿化方案
2014/05/07 职场文书
大学军训的体会
2014/11/08 职场文书
2014年组织部工作总结
2014/11/14 职场文书
公司员工安全协议书
2014/11/21 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
居安思危观后感
2015/06/11 职场文书
捐书仪式主持词
2015/07/04 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript