微客导航 » 文章资讯 » Vue.js实现立体计算器

Vue.js实现立体计算器

2023-07-31 19:18:03 357

本文实例为大家分享了Vue.js制作立体计算器的具体方法，供大家参考，具体内容如下

项目效果图

这是一个简单的项目实现加减乘除运算

项目结构

代码展示

计算器1.0.html




计算器




c

5 6 7 8 9 0 + - / X = .

style.css

#big{
position:relative;
width:355px;
height:240px;
background-color:#999cff;
margin:100pxauto;
border-radius:10px;
box-shadow:15px15px15px#000;
cursor:pointer;
}

#bigdiv{
position:absolute;
box-shadow:5px5px5px#000;
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
width:80px;
height:40px;
border-radius:5px;
}

#c{
background-color:#FFFFFF;
left:10px;
top:7px;
}

#a7{
background-color:#FFFFFF;
left:10px;
top:55px;
}

#a4{
background-color:#FFFFFF;
left:10px;
top:100px;
}

#a1{
background-color:#FFFFFF;
left:10px;
top:145px;
}

#a0{
background-color:#FFFFFF;
left:10px;
top:190px;
}

#a8{
background-color:#FFFFFF;
left:95px;
top:55px;
}

#a5{
background-color:#FFFFFF;
left:95px;
top:100px;
}

#a2{
background-color:#FFFFFF;
left:95px;
top:145px;
}

#a11{
background-color:#FFFFFF;
left:95px;
top:190px;
}

#a9{
background-color:#FFFFFF;
left:180px;
top:55px;
}

#a6{
background-color:#FFFFFF;
left:180px;
top:100px;
}

#a3{
background-color:#FFFFFF;
left:180px;
top:145px;
}

#a12{
background-color:#FFFFFF;
left:180px;
top:190px;
}

#a16{
background-color:#f44336;
left:265px;
top:55px;
}

#a15{
background-color:#f44336;
left:265px;
top:100px;
}

#a14{
background-color:#f44336;
left:265px;
top:145px;
}

#a13{
background-color:#f44336;
left:265px;
top:190px;
}

#a17{
position:absolute;
box-shadow:inset5px5px5px#000;
text-align:center;
font-size:20px;
width:250px;
height:40px;
background-color:#99ffa6;
border-radius:5px;
left:95px;
top:5px;
}

app.js

varapp=newVue({
el:'#big',
data:{
res:''
},
methods:{
add:function(index){
this.res+=index;
},
run:function(){
try{
this.res=eval(this.res);
}catch(exception){
this.res='';
alert("表达式输入错误");
}
},
clear:function(){
this.res='';
}
}
})

用相对布局把计算器的每一个按键定好位置，加上一些圆角，颜色可以根据自己喜欢的颜色来给，实现3D效果最关键的是要加上阴影效果。注意input标签的阴影要在内侧。采用Vue.js框架使用v-model指令实现input标签的双向绑定。在methods属性中添加函数使用v-on指令绑定事件，这里使用缩写@click,add函数的功能是完成字符串的拼接，run函数调用eval函数将拼接好的字符解析并运算出结果赋给res，如果字符串格式有误抛出异常并通过alert函数反馈给用户然后把res清除。

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

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

返回顶部
3162201930
czq8825@qq.com

Vue.js实现立体计算器

热门推荐

随机推荐