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='http://m.cgvv.com.cn/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 @click='clear'>AC</div> <div @click='back'><-</div> <div class='key highlight'>#</div> <div @click='except'>/</div> <div class='key'>7</div> <div class='key'>8</div> <div class='key'>9</div> <div @click='ride'>*</div> <div class='key'>4</div> <div class='key'>5</div> <div class='key'>6</div> <div @click='reduce'>-</div> <div class='key'>1</div> <div class='key'>2</div> <div class='key'>3</div> <div @click='add'>+</div> <div class='key'>0</div> <div class='key'>.</div> <div @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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備