这篇文章主要介绍了Vue实现计算器计算效果的发,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
具体代码,供大家参考,
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt;元http-equiv=癤-UA-Compatible"内容=癐E=edge"比;
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
https://www.yisu.com/zixun/& lt;脚本src=" . ./js/vue.js ">
<标题>与
<风格type=" text/css ">
* {
填充:0;
保证金:0;
box-sizing: border-box;
}
身体{
background - color: # 000000;
}
.panle {
边界:1 px固体# 5 f5f5f;
宽度:100大众;
高度:vh 29日;
字体大小:3.8125快速眼动;
颜色:# FFFFFF;
text-align:正确;
位置:相对;
}
.curr {
显示:块;
位置:绝对的;
宽度:继承;
底部:0;
字体大小:3.5快速眼动;
}
.operation {
显示:块;
位置:绝对的;
宽度:继承;
底部:80 px;
字体大小:2.875快速眼动;
}
.prev {
字体大小:2.875快速眼动;
显示:块;
位置:绝对的;
宽度:继承;
底部:8眼动;
}
.keyboad {
显示:flex;
flex-flow:行包装;
保证金:0 calc(大众(8 - 16 px)/2);
}
。key {
显示:inline-block;
边界:1 px固体# 333;
宽度:23大众;
高度:23大众;
这个特性:50%;
text-align:中心;
字体大小:30 px;
行高:23大众;
保证金:2 px;
background - color: # 616161;
颜色:# ffffff;
光标:指针;
大纲:没有;
边界:没有;
不必:0 9 px # 999;
}
活跃。key: {
不必:0 5 px # 666;
变换:translateY (4 px);
}
。key:胎{
这个特性:30%;
flex-grow: 1;
保证金:0;
}
.highlight {
background - color: # e77919;
}>
