今天使用vue2基础知识设计一个简易计算器
下面是计算器的样式:
HTML代码段:
<div id="box">
<table>
<tr>
<td colspan="4"><input type="text" style="width: 200px" value='' v-model="rel"></td>
</tr>
<tr>
<td><input type="button" value="±" @click="Negate()"></td>
<td><input type="button" value="%" @click="Percent()"></td>
<td><input type="button" value="del" @click="del()"></td>
<td><input type="button" value="C" @click="clean()"></td>
</tr>
<tr>
<td><input type="button" value="1" @click="add('1')"></td>
<td><input type="button" value="2" @click="add('2')"></td>
<td><input type="button" value="3" @click="add('3')"></td>
<td><input type="button" value="+" @click="type('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" @click="add('4')"></td>
<td><input type="button" value="5" @click="add('5')"></td>
<td><input type="button" value="6" @click="add('6')"></td>
<td><input type="button" value="-" @click="type('-')"></td>
</tr>
<tr>
<td><input type="button" value="7" @click="add('7')"></td>
<td><input type="button" value="8" @click="add('8')"></td>
<td><input type="button" value="9" @click="add('9')"></td>
<td><input type="button" value="*" @click="type('*')"></td>
</tr>
<tr>
<td><input type="button" value="0" @click="add('0')"></td>
<td><input type="button" value="." @click="spot('.')"></td>
<td><input type="button" value="/" @click="type('/')"></td>
<td><input type="button" value="=" v-on:click="result()"></td>
</tr>
</table>
</div>
css代码段:
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #eee;
}
table {
padding: 20px;
/* 容器使用grid网格布局 */
display: grid;
/* 设置6行,每一行的高度为80px */
grid-template-rows: repeat(6, 60px);
/* 设置4列,每一列的宽度为80px */
grid-template-columns: repeat(4, 70px);
/* 每个单元格的内容 */
grid-template-areas: "result result result result"
"AC plus-minus percent divide"
"num-7 num-8 num-9 multiply"
"num-4 num-5 num-6 subtract"
"num-1 num-2 num-3 add"
"num-0 num-0 dot equal";
/* 页面的阴影 */
/* 参数:x偏移量,y偏移量,阴影模糊半径,扩散半径,阴影颜色 */
box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1),
8px 8px 16px -10px rgba(0, 0, 0, .15);
}
input {
width: 50px;
text-align: center;
outline: none;
border: none;
margin: 8px;
font-size: 30px;
/* 设置阴影 */
box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1),
4px 4px 16px -10px rgba(0, 0, 0, 0.3);
/* 设置背景是线性渐变 */
background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%, rgba(246, 246, 246, 1) 100%);
border-radius: 40px;
}
input:active {
/* inset是阴影改为内部 */
box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset,
4px 4px 16px -10px rgba(0, 0, 0, 0.3) inset;
}
</style>
vue.js代码段
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.config.productionTip = false
var vm = new Vue({
el: "#box",
data: {
rel: "",
isDecimalAdded: false,
//控制运算符只能点击一次
isDecimalAdd: true,
// 控制小数点的点击
},
methods: {
//判断运算结束后的结果是否含有小数点如果有无法再次追加
//对这个rel进行加负号的操作
Negate() {
this.rel = Number(this.rel) * -1;
},
//进行%的操作
Percent() {
this.rel = Number(this.rel) * 0.01
},
spot(index) { //设置小数点
if (this.isDecimalAdd) {
if (isNaN(this.rel[this.rel.length - 1])) { //设置如果前一位字符不是数字就补全0
this.rel += '0.'
this.isDecimalAdd = false; //不可再次点击运算符
this.isDecimalAdded = false; //不可再次点击小数点
} else {
this.rel += index;
this.isDecimalAdd = false;
this.isDecimalAdded = false;
}
}
},
add(index) { //这里就是按键绑定的方法,把获取到的值拼接到rel字符串上
if (this.rel.length == 1 && this.rel[0] == 0) { //控制在前一位是零不是数字1-9的情况下持续输出
index == 0 ? console.log(0) : this.rel = index
}
else if (isNaN(this.rel[this.rel.length - 2]) && this.rel[this.rel.length - 1] == 0 && index !== 0) { //控制零的前一位字符是零和前一位字符不是数字的情况下持续输出
this.rel = this.rel.slice(0, this.rel.length - 1); //字符串截取
this.rel += index;
} else if (isNaN(this.rel[this.rel.length - 3]) && this.rel[this.rel.length - 1] == 0 && index == 0) { //控制零的前一位字符是零后面也是零的情况下输出
this.rel = this.rel.slice(0, this.rel.length - 2); //字符串截取
this.rel += index;
}
else {
this.rel += index;
this.isDecimalAdded = true;
console.log(34);
}
},
type(index) { //控制运算符
if (this.isDecimalAdded) {
this.rel += index;
this.isDecimalAdded = false; //不可连续点击运算符
this.isDecimalAdd = true;
};
},
result() {
this.rel = String(parseFloat(eval(this.rel).toPrecision(12)));//这里是用eval方法进行一个计算然后处理数字精确问题
this.rel.indexOf(".") == -1 ? this.isDecimalAdd = true : this.isDecimalAdd = false; //判断运算结束后的结果是否含有小数点如果有无法再次追加
console.log(this.rel);
if (isNaN(this.rel)) {
this.rel = ''
}
},
del() {
this.rel = this.rel.substring(0, this.rel.length - 1);
this.rel.indexOf(".") == -1 ? this.isDecimalAdd = true : this.isDecimalAdd = false; //判断运算结束后的结果是否含有小数点如果有无法再次追加
this.rel.indexOf(".") == -1 ? this.isDecimalAdded = true : this.isDecimalAdded = false; //判断删除结束后的结果是否含有运算符如果有无法再次追加
},
clean() {
this.rel = "";
this.rel.indexOf(".") == -1 ? this.isDecimalAdd = true : this.isDecimalAdd = false;
this.rel.indexOf(".") == -1 ? this.isDecimalAdded = true : this.isDecimalAdded = false;
}
}
})
</script>
引用的https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js是开发环境版本代码,包含了有帮助的命令行警告 ,也可自己去官网下载到自己的文件夹中然后引用
下面是实现效果