Vue.js实现立体计算器

#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: inset 5px 5px 5px #000;
text-align: center;
font-size: 20px;
width: 250px;
height: 40px;
background-color: #99ffa6;
border-radius: 5px;
left: 95px;
top: 5px;
}

app.js

var app = new Vue({
 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清除。