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 相关文章推荐
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 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/12/28 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
js function使用心得
2010/05/10 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
python编程线性回归代码示例
2017/12/07 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python从零开始创建区块链
2018/03/06 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python字符串格式化方式解析
2019/10/19 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Python如何读写二进制数组数据
2020/08/01 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
师范大学生求职信
2014/06/13 职场文书
伊琍体标语
2014/06/25 职场文书
离婚协议书范本
2015/01/26 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书