简易计算器小案例
逻辑部分没有完全实现，主要用来练手，加强理解父子组件之间的通信过程。
效果：
简易计算器代码
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;
}
}
})