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 相关文章推荐
JavaScript面象对象设计
Apr 28 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
JavaScript数组去重算法实例小结
May 07 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网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python 专题四 文件基础知识
2017/03/20 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
python基于opencv实现人脸识别
2021/01/04 Python
植物选择:Botanic Choice
2017/02/15 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
财务人员担保书
2014/05/13 职场文书
销售人员管理制度
2015/08/06 职场文书