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父窗口控制只弹出一个子窗口
Apr 10 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
微信小程序实现转盘抽奖
Sep 21 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python并发编程之线程实例解析
2017/12/27 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
Python装饰器用法实例分析
2019/01/14 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python利用线程实现多任务
2020/09/18 Python
2014年幼儿园植树节活动方案
2014/03/02 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
介绍信的写法
2015/01/31 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏