vue实现计算器
Vue 实现计算器的方法
使用 Vue 实现计算器可以充分利用其响应式数据和组件化特性。以下是一个简单的实现方案：
创建 Vue 项目
使用 Vue CLI 或 Vite 初始化项目：
npm init vue@latest calculator
cd calculator
npm install核心代码实现
在 src/App.vue 或单独组件中实现：
<template>
<div class="calculator">
<div class="display">{{ current || '0' }}</div>
<div class="buttons">
<button @click="clear">C</button>
<button @click="sign">+/-</button>
<button @click="percent">%</button>
<button @click="divide" class="operator">÷</button>
<button @click="append('7')">7</button>
<button @click="append('8')">8</button>
<button @click="append('9')">9</button>
<button @click="times" class="operator">×</button>
<button @click="append('4')">4</button>
<button @click="append('5')">5</button>
<button @click="append('6')">6</button>
<button @click="minus" class="operator">-</button>
<button @click="append('1')">1</button>
<button @click="append('2')">2</button>
<button @click="append('3')">3</button>
<button @click="add" class="operator">+</button>
<button @click="append('0')" class="zero">0</button>
<button @click="dot">.</button>
<button @click="equal" class="operator">=</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
current: '',
previous: null,
operator: null,
operatorClicked: false
}
},
methods: {
clear() {
this.current = '';
},
sign() {
this.current = this.current.charAt(0) === '-' ?
this.current.slice(1) : '-' + this.current;
},
percent() {
this.current = parseFloat(this.current) / 100;
},
append(number) {
if (this.operatorClicked) {
this.current = '';
this.operatorClicked = false;
}
this.current = `${this.current}${number}`;
},
dot() {
if (this.current.indexOf('.') === -1) {
this.append('.');
}
},
setPrevious() {
this.previous = this.current;
this.operatorClicked = true;
},
divide() {
this.operator = (a, b) => a / b;
this.setPrevious();
},
times() {
this.operator = (a, b) => a * b;
this.setPrevious();
},
minus() {
this.operator = (a, b) => a - b;
this.setPrevious();
},
add() {
this.operator = (a, b) => a + b;
this.setPrevious();
},
equal() {
this.current = `${this.operator(
parseFloat(this.previous),
parseFloat(this.current)
)}`;
this.previous = null;
}
}
}
</script>
<style>
.calculator {
width: 300px;
margin: 50px auto;
font-size: 24px;
}
.display {
background: #f0f0f0;
padding: 15px;
text-align: right;
border: 1px solid #ddd;
border-radius: 5px 5px 0 0;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
button {
padding: 20px;
background: #fff;
border: 1px solid #ddd;
cursor: pointer;
}
button:hover {
background: #eee;
}
.operator {
background: #f0f0f0;
}
.zero {
grid-column: span 2;
}
</style>功能扩展建议
- 增加历史记录功能，存储之前的计算结果
- 实现科学计算器功能（三角函数、对数等）
- 添加键盘支持，允许用户使用键盘输入
- 实现主题切换功能（深色/浅色模式）
- 添加动画效果提升用户体验
部署与测试
运行开发服务器：
npm run dev构建生产版本：
npm run build这个实现包含了基本计算功能，包括加减乘除、百分比、正负号切换等操作。通过 Vue 的响应式特性，界面会自动更新计算结果。
