Simple calculator case
The logic part is not fully realized, it is mainly used to practice hands and strengthen the understanding of the communication process between the parent and child components.
effect:
Simple calculator code
counter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件通信之简易计算器小案例</title>
<link rel="stylesheet" href="counter.css">
</head>
<body>
<!--计算器-->
<div id="info">
<h1>结果为：{
{result}}</h1>
<counterbtns :cbtns="btns" @clickcounterbtns="getresult"></counterbtns>
</div>
<template id="counterbtns">
<div>
<table cellspacing="0" cellpadding="0">
<caption>简易计算器</caption>
<thead>
<tr>
<td colspan="4">
<h2 style="text-align: right">{
{c}}</h2>
</td>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in cbtns">
<td v-for="(b, index) in item">
<input type="button" :value="b.symbol" @click="clickbtns(b)"></input>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script src="../../../js/vue.js"></script>
<script src="counter.js"></script>
</body>
</html>
counter.css
table{
border-collapse: collapse;
border: 1px solid darkgray;
}
caption{
margin-bottom: 15px;
}
table thead{
border-color: darkgray;
}
table tbody{
border-color: transparent;
}
table td{
width: 50px;
height: 50px;
}
tbody input{
width: 100%;
height: 100%;
font-size: 30px;
}
counter.js
let num = [];
let a,b;
let sym = null;
let n = 0;
const counterbtns = {
template: `#counterbtns`,
props: {
cbtns: Object,
},
data() {
return {
c: 0,
}
},
methods: {
clickbtns(b) {
// console.log("num=" + num +", length=" + num.length);
// console.log(sym);
if (typeof (b.id) === 'string') {
// 符号
if (b.id === 'C'){
// 清空
sym = null;
num.splice(0, num.length);
this.c = 0;
// console.log(this.c)
} else {
num.push(n);
n = 0;
if (b.id !== 'equal') {
sym = b.id;
} else if (b.id === 'equal' && sym != null && num.length >= 2) {
// 计算
let str = null;
b = num.pop();
a = num.pop();
switch (sym) {
case 'divide':
this.c = a / b;
str = '÷';
break;
case 'multiply':
this.c = a * b;
str = 'x'
break;
case 'plus':
this.c = a + b;
str = '+';
break;
case 'subtract':
this.c = a - b;
str = '-';
break;
}
console.log(a + ' ' + str + ' ' + b + ' = ' + this.c);
this.$emit('clickcounterbtns', this.c);
sym = null;
num.splice(0, num.length);
}
// console.log("符号" + sym);
}
} else if (typeof (b.id) === 'number'){
// 数字
n = n * 10 + b.id;
// console.log(n);
}
}
}
}
let info = new Vue({
el : "#info",
data : {
result: 0,
btns: {
row1: [
{
id: 7, symbol: 7},
{
id: 8, symbol: 8},
{
id: 9, symbol: 9},
{
id: 'divide', symbol: '÷'},
],
row2: [
{
id: 4, symbol: 4},
{
id: 5, symbol: 5},
{
id: 6, symbol: 6},
{
id: 'multiply', symbol: 'x'},
],
row3: [
{
id: 1, symbol: 1},
{
id: 2, symbol: 2},
{
id: 3, symbol: 3},
{
id: 'plus', symbol: '+'},
],
row4: [
{
id: 'clean',symbol: 'C'},
{
id: 0, symbol: 0},
{
id: 'subtract', symbol: '-'},
{
id: 'equal', symbol: '='},
],
}
},
components: {
counterbtns,
},
methods: {
getresult(result){
this.result = result;
}
}
})