vue可以直接进行运算么_Vue实现手机计算器
本文实例为大家分享了Vue制作仿手机计算器的具体代码,供大家参考,具体内容如下
1.首先是把样式做出来,按钮是0-9,还有加减乘除,百分号,清除按钮,小数点,等号、等等
页面视图
JS
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 //判断计算器是否已经开始输入数字,用于正负数和百分比计算的时候作一些判断
}
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue可以直接进行运算么_Vue实现手机计算器相关推荐
- vue可以直接进行运算么_Vue实现计算器功能
直接上代码,目前程序没有校验小数点输入是否正确情况. v-model="result" clearable> 7 8 9 / 4 5 6 * 1 2 3 + 0 . = - ...
- 我的世界怎么用计算机,我的世界运算工艺mod教程全计算器使用说明
小编为大家带来了<我的世界>运算工艺mod教程全计算器使用说明,运算工艺是一个理念新颖且非常有趣的一个科技类模组,这次来为大家介绍全部的计算器,分别是合成计算器,计算器,科学计算器.完美计 ...
- springboot vue 小程序小区物业管理系统【物业手机版(小程序)+物业系统后端+物业系统前端+业主手机端(小程序)】(功能较丰富)
springboot vue 小程序小区物业管理系统[物业手机版(小程序)+物业系统后端+物业系统前端+业主手机端(小程序)](功能较丰富) 高清视频演示: https://www.bilibili. ...
- vue大括号里接受一个函数_vue双花括号的使用方法 附练习题
本文实例为大家分享了vue双花括号的具体代码,供大家参考,具体内容如下 {{}}的使用 {{msg}} {{cart.brand}} 3 + 5 = {{ 3 + 5 }} new Vue({ el: ...
- vue子组件mounted不执行_vue 路由子组件created和mounted不起作用的解决方法
vue 路由子组件created和mounted不起作用的解决方法 判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) 使用v-if判断(成功解决) 可以 ...
- vue中常碰见的坑_Vue 与 Vuex 的第一次接触遇到的坑
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便 ...
- vue如何配置服务器端跨域_vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 阅读时间需要三分钟 production:产品 生产环境 development:开发 开发环境 ...
- vue 怎么全局到入常量_vue定义全局变量和全局方法的方法示例
一.全局引入文件 1.先定义共用组件 common.vue // 定义一些公共的属性和方法 const httpUrl = 'http://39.105.17.99:8080/' function c ...
- vue 相同的id不合并_vue中key的作用
摘要 本文结合源码说明了key的作用,给出了一个不写key的反例,并分析了原因. 内容 key的作用 不写key会出的bug及原因分析 key的实践方案 key的作用 在数据变化前后,vue会得到两个 ...
最新文章
- 【Spring实战】—— 14 传统的JDBC实现的DAO插入和读取
- cmd中net start mysql发生系统错误5
- 华为鸿蒙会选择开源吗,而华为已经承诺鸿蒙系统会彻底开源,鸿蒙是开源系统...
- 文件解析漏洞总结-IIS
- 国内优质海量数据集收集网站
- fgo服务器维护检测脚本,fgo脚本工具游戏蜂窝简单实例
- 安装最新版 MySQL 8.0.30
- 烽火JAVA面试题目
- git 解决合并冲突
- 【机器学习】左逆、右逆、伪逆和广义逆的概念理解
- C case和UVM TB的交互,tube_print, event_sync
- 卸载百度软件修复服务器,快速修复win7系统笔记本卸载百度软件中心助手的解决教程...
- centos7 时间自动同步
- ROS学习【2】-----ubuntu16.04中进行ROS通信编程(话题编程)
- java.lang.OutOfMemoryError: Metaspace
- tcp_diag 内核相关实现 以及调用层次
- EDG夺冠时刻,微帧助力虎牙打造极佳观看体验
- Bootstrap实现的响应式APP下载页面代码
- 京东副总裁何晓冬:GPT-3后,人机对话与交互何去何从?| CCF-GAIR 2020
- 365天挑战LeetCode1000题——Day 154 Knight
热门文章
- SQL 优化之该走索引却不走索引的分析
- 办公室族的十大饮食危机
- 一台服务器多个tomcat运行
- 4-3 组件参数校验与非props特性
- 服务容错保护断路器Hystrix之四:断路器监控(Hystrix Dashboard)-turbine集群监控
- 对于response.setContentType(MIME)的解释
- mysql的load data,高速将文本文件,插入数据库中
- Hive - Create TableDrop Table ALTER Table(中)
- 外键列到底要建在哪里?
- AX2009 的EP开发要点