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="../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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue-model實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
- Vue實(shí)現(xiàn)手機(jī)計(jì)算器
- Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器案例
- 使用Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
- Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
- vue.js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
- Vue.js實(shí)現(xiàn)立體計(jì)算器
- vue實(shí)現(xiàn)計(jì)算器功能
- vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能示例
- Vue.js實(shí)現(xiàn)的計(jì)算器功能完整示例
- Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
相關(guān)文章
vue.js使用Element-ui實(shí)現(xiàn)導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了vue.js使用Element-ui中實(shí)現(xiàn)導(dǎo)航菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue動(dòng)態(tài)創(chuàng)建注冊(cè)component的實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)創(chuàng)建注冊(cè)component的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法
本文主要介紹了vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09在vue3項(xiàng)目中給頁(yè)面添加水印的實(shí)現(xiàn)方法
這篇文章主要給大家介紹一下在vue3項(xiàng)目中添加水印的實(shí)現(xiàn)方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08基于vue+element實(shí)現(xiàn)全局loading過(guò)程詳解
這篇文章主要介紹了基于vue+element實(shí)現(xiàn)全局loading過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07Vue引用Swiper4插件無(wú)法重寫(xiě)分頁(yè)器樣式的解決方法
今天小編就為大家分享一篇Vue引用Swiper4插件無(wú)法重寫(xiě)分頁(yè)器樣式的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題
這篇文章主要介紹了vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vant-ui AddressEdit地址編輯和van-area的用法說(shuō)明
這篇文章主要介紹了vant-ui AddressEdit地址編輯和van-area的用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11