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 相关文章推荐
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
Node.js搭建小程序后台服务
Jan 03 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
vue router 组件的高级应用实例代码
Apr 08 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 管理系统程序中的后门
2009/08/05 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP反射机制用法实例
2014/08/28 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
js date 格式化
2017/02/15 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python实现备份文件实例
2014/09/16 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python中update的基本使用方法详解
2019/07/17 Python
python多线程同步之文件读写控制
2021/02/25 Python
python检测服务器端口代码实例
2019/08/31 Python
python自动生成model文件过程详解
2019/11/02 Python
python判断元素是否存在的实例方法
2020/09/24 Python
什么是makefile? 如何编写makefile?
2013/01/02 面试题
中医药大学毕业生自荐信
2013/11/08 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
保洁员岗位职责
2015/02/04 职场文书
面试复试通知单
2015/04/24 职场文书
CAD实训总结范文
2015/08/03 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫