Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果的具體代碼，供大家參考，具體內(nèi)容如下
<!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://www.leifengta.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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象2. Docker 啟動(dòng)Redis 并設(shè)置密碼的操作3. ASP新手必備的基礎(chǔ)知識(shí)4. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）5. asp文件用什么軟件編輯6. python 爬取豆瓣網(wǎng)頁(yè)的示例7. python 實(shí)現(xiàn)有道翻譯功能8. JS中6個(gè)對(duì)象數(shù)組去重的方法9. vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)10. 利用CSS制作3D動(dòng)畫
網(wǎng)公網(wǎng)安備