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 14 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
javascript中的new使用
2010/03/20 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python 动态加载的实现方法
2017/12/22 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python基础之文件读取的讲解
2019/02/16 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
利用python爬取有道词典的方法
2020/12/08 Python
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
幼儿园教师节活动方案
2014/02/02 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
派出所所长先进事迹
2014/05/19 职场文书
连锁超市项目计划书
2014/09/15 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
护士辞职信怎么写
2015/02/27 职场文书
解析MySQL binlog
2021/06/11 MySQL