微客导航 » 文章资讯 » Vue实现计算器计算效果

Vue实现计算器计算效果

2023-07-18 16:25:04 167

本文实例为大家分享了Vue实现计算器计算效果的具体代码，供大家参考，具体内容如下








compare

*{
padding:0;
margin:0;
box-sizing:border-box;
}
body{
background-color:#000000;
}
.panle{
border:1pxsolid#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:rowwrap;
margin:0calc((8vw-16px)/2);
}
.key{
display:inline-block;
border:1pxsolid#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:09px#999;
}
.key:active{
box-shadow:05px#666;
transform:translateY(4px);
}
.key:last-child{
border-radius:30%;
flex-grow:1;
margin:0;
}
.highlight{
background-color:#e77919;
}






{{prevNum}}
{{operation}}
{{currNum}}

7 8 9 * 4 5 6 - 1 2 3 + 0 . = letvm=newVue({ 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=[]; } } })

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue实现计算器计算效果

热门推荐

随机推荐