Vue实现计算器计算效果


Posted in Javascript onAugust 17, 2020

本文实例为大家分享了Vue实现计算器计算效果的具体代码,供大家参考,具体内容如下

Vue实现计算器计算效果

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <script src="../js/vue.js"></script>
 <title>compare</title>
 <style type="text/css">
 *{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 }
 body{
 background-color: #000000;
 }
 .panle{
 border: 1px solid #5f5f5f;
 width: 100vw;
 height: 29vh;
 font-size: 3.8125rem;
 color: #FFFFFF;
 text-align: right;
 position: relative;
 }
 .curr{
 display: block;
 position: absolute;
 width: inherit;
 bottom: 0;
 font-size: 3.5rem;
 }
 .operation{
 display: block;
 position: absolute;
 width: inherit;
 bottom: 80px;
 font-size: 2.875rem;
 }
 .prev{
 font-size: 2.875rem;
 display: block;
 position: absolute;
 width: inherit;
 bottom: 8rem;
 }
 .keyboad{
 display: flex;
 flex-flow: row wrap;
 margin: 0 calc((8vw - 16px) / 2);
 }
 .key{
 display: inline-block;
 border: 1px solid #333;
 width: 23vw;
 height: 23vw;
 border-radius: 50%;
 text-align: center;
 font-size: 30px;
 line-height: 23vw;
 margin: 2px;
 background-color: #616161;
 color: #ffffff;
 cursor: pointer;
 outline: none;
 border: none;
 box-shadow: 0 9px #999;
 }
 .key:active {
 box-shadow: 0 5px #666;
 transform: translateY(4px);
 }
 .key:last-child{
 border-radius: 30%;
 flex-grow: 1;
 margin: 0;
 }
 .highlight{
 background-color: #e77919;
 }
 
 </style>
 </head>
 <body>
 <div id="app">
 <div class="panle">
 <span class="prev">{{prevNum}}</span>
 <span class="operation">{{operation}}</span>
 <span class="curr">{{currNum}}</span>
 </div>
 <div class="keyboad">
 <div class="key highlight" @click="clear">AC</div>
 <div class="key highlight" @click="back"><-</div>
 <div class="key highlight">#</div>
 <div class="key highlight" @click="except">/</div>
 <div class="key">7</div>
 <div class="key">8</div>
 <div class="key">9</div>
 <div class="key highlight" @click="ride">*</div>
 <div class="key">4</div>
 <div class="key">5</div>
 <div class="key">6</div>
 <div class="key highlight" @click="reduce">-</div>
 <div class="key">1</div>
 <div class="key">2</div>
 <div class="key">3</div>
 <div class="key highlight" @click="add">+</div>
 <div class="key">0</div>
 <div class="key">.</div>
 <div class="key highlight" @click="result">=</div>
 </div>
 </div>
 <script type="text/javascript">
 let vm = new Vue({
 el:"#app",
 data(){
 return{
 operation:'',
 prevNum:'',
 currNum:'',
 keyboard:[],
 arr:[],
 res:''
 }
 },
 mounted() {
 this.keyboard = document.querySelectorAll('div[class=key]');
 Array.from(this.keyboard, key => key.addEventListener('click',this.getVal))
 },
 methods:{
 getVal(e){
 this.currNum += e.target.innerHTML;
 this.arr.push(e.target.innerHTML);
 },
 clear(){
 this.prevNum = this.operation = this.currNum = '';
 },
 back(){
 this.arr.splice(-1,1)
 this.currNum = this.arr.join('')
 },
 add(){
 this.prevNum = this.currNum;
 this.currNum = '';
 this.operation = '+';
 },
 reduce(){
 this.prevNum = this.currNum;
 this.currNum = '';
 this.operation = '-';
 },
 ride(){
 this.prevNum = this.currNum;
 this.currNum = '';
 this.operation = '*';
 },
 except(){
 this.prevNum = this.currNum;
 this.currNum = '';
 this.operation = '/';
 },
 result(){
 switch(this.operation){
 case'+':
 this.res = Number(this.currNum) + Number(this.prevNum);
 break;
 case'-':
 this.res = Number(this.prevNum) - Number(this.currNum);
 break;
 case'*':
 this.res = Number(this.prevNum) * Number(this.currNum);
 break;
 case'/':
 this.res = Number(this.prevNum) / Number(this.currNum);
 break;
 }
 this.clear();
 this.currNum = this.res; 
 this.arr = [];
 }
 }
 })
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
详解JavaScript函数对象
Nov 15 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
vue之nextTick全面解析
May 17 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
vue-router传参用法详解
Jan 19 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
vue-model实现简易计算器
Aug 17 #Javascript
Vue实现手机计算器
Aug 17 #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
You might like
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
python print出共轭复数的方法详解
2019/06/25 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
小学教师的个人自我鉴定
2013/10/24 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
会计专业自荐信范文
2015/03/05 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
Python学习之os包使用教程详解
2022/03/21 Python