Vue实现计算器计算效果

时间：2021-05-26

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章