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 相关文章推荐
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
js调用刷新界面的几种方式
May 03 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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 flock 文件锁详细介绍
2012/12/29 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php获取apk包信息的方法
2014/08/15 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PDO::query讲解
2019/01/29 PHP
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
安装Python的教程-Windows
2017/07/22 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
【python】matplotlib动态显示详解
2019/04/11 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
初一家长会邀请函
2014/01/31 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
教师节联欢会主持词
2015/07/04 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS