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 相关文章推荐
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
layui实现三级联动效果
2019/07/26 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Django使用Celery异步任务队列的使用
2018/03/13 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
新媒传信软件测试面试题
2013/02/24 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
司马光教学反思
2014/02/01 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
python turtle绘图命令及案例
2021/11/23 Python
详解nginx location指令
2022/01/18 Servers