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数据缓存系统实现代码
Oct 24 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
微信小程序 开发之全局配置
May 05 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
vue开发简单上传图片功能
Jun 30 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内置过滤器FILTER使用实例
2014/06/25 PHP
yii操作session实例简介
2014/07/31 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
详解Python的单元测试
2015/04/28 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
手机银行营销方案
2014/03/14 职场文书
党员群众路线承诺书
2014/05/20 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
学校运动会通讯稿
2015/07/18 职场文书
感恩的心主题班会
2015/08/12 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
新手初学Java List 接口
2021/07/07 Java/Android
docker-compose部署Yapi的方法
2022/04/08 Servers
python实现学员管理系统(面向对象版)
2022/06/05 Python