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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php文件缓存方法总结
2016/03/16 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
PHP实现简易图形计算器
2020/08/28 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
nodeJS微信分享
2017/12/20 NodeJs
VueJs组件之父子通讯的方式
2018/05/06 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
puppeteer库入门初探
2019/01/09 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python中的pack和unpack的使用
2018/03/12 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
医药代表个人求职信范本
2013/12/19 职场文书
毕业生自荐书模版
2014/01/04 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
清明节演讲稿
2014/05/27 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python