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 相关文章推荐
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
js实现进度条的方法
Feb 13 Javascript
jQuery构造函数init参数分析
May 13 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
vue双向绑定简要分析
Mar 23 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
php注入实例
2006/10/09 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
javascript jQuery插件练习
2008/12/24 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
浅谈python可视化包Bokeh
2018/02/07 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
extern在函数声明中是什么意思
2014/01/19 面试题
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
个人现实表现材料
2014/02/04 职场文书
司法建议书范文
2014/05/13 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
Python List remove()实例用法详解
2021/08/02 Python
MySQL优化及索引解析
2022/03/17 MySQL
JavaScript前端面试组合函数
2022/06/21 Javascript