欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果

 更新時(shí)間:2020年08月17日 15:10:24   作者:Hello Hongbin  
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue.js使用Element-ui實(shí)現(xiàn)導(dǎo)航菜單

    vue.js使用Element-ui實(shí)現(xiàn)導(dǎo)航菜單

    這篇文章主要為大家詳細(xì)介紹了vue.js使用Element-ui中實(shí)現(xiàn)導(dǎo)航菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue動(dòng)態(tài)創(chuàng)建注冊(cè)component的實(shí)例代碼

    Vue動(dòng)態(tài)創(chuàng)建注冊(cè)component的實(shí)例代碼

    這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)創(chuàng)建注冊(cè)component的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法

    vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法

    本文主要介紹了vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 在vue3項(xiàng)目中給頁面添加水印的實(shí)現(xiàn)方法

    在vue3項(xiàng)目中給頁面添加水印的實(shí)現(xiàn)方法

    這篇文章主要給大家介紹一下在vue3項(xiàng)目中添加水印的實(shí)現(xiàn)方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來看看吧
    2023-08-08
  • 基于vue+element實(shí)現(xiàn)全局loading過程詳解

    基于vue+element實(shí)現(xiàn)全局loading過程詳解

    這篇文章主要介紹了基于vue+element實(shí)現(xiàn)全局loading過程詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • Vue引用Swiper4插件無法重寫分頁器樣式的解決方法

    Vue引用Swiper4插件無法重寫分頁器樣式的解決方法

    今天小編就為大家分享一篇Vue引用Swiper4插件無法重寫分頁器樣式的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題

    vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題

    這篇文章主要介紹了vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vant-ui AddressEdit地址編輯和van-area的用法說明

    vant-ui AddressEdit地址編輯和van-area的用法說明

    這篇文章主要介紹了vant-ui AddressEdit地址編輯和van-area的用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue項(xiàng)目中播放rtmp視頻文件流的方法

    vue項(xiàng)目中播放rtmp視頻文件流的方法

    這篇文章主要介紹了vue項(xiàng)目中播放rtmp視頻文件流 ,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-09
  • Vue開發(fā)中Jwt的使用詳解

    Vue開發(fā)中Jwt的使用詳解

    Vue中使用JWT進(jìn)行身份認(rèn)證也是一種常見的方式,它能夠更好地保護(hù)用戶的信息,本文主要介紹了Vue開發(fā)中Jwt的使用詳解,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-12-12

最新評(píng)論