vue自定義實(shí)現(xiàn)計(jì)算器組件(附完整代碼)
更新時(shí)間：2025年06月09日 11:23:10 作者：S筱瀟S四維Smile
這篇文章主要為大家詳細(xì)介紹了如何使用Vue自定義實(shí)現(xiàn)一個(gè)計(jì)算器組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
自定義組件實(shí)現(xiàn)以下簡(jiǎn)單的計(jì)算器功能：
創(chuàng)建計(jì)算器組件文件calculator.vue，代碼如下：
<template>
<div class="calculator">
<!-- 當(dāng)前運(yùn)算過(guò)程顯示區(qū)域 -->
<div class="expression">{{ currentExpression }}</div>
<!-- 計(jì)算器顯示屏 -->
<div class="display">{{ displayValue }}</div>
<!-- 按鈕區(qū)域 -->
<div class="buttons">
<el-button @click="clear">AC</el-button>
<el-button @click="toggleSign">+/-</el-button>
<el-button @click="inputPercent">%</el-button>
<el-button @click="inputOperator('÷')" style="font-size: 22px;">÷</el-button>
<el-button @click="inputDigit(7)">7</el-button>
<el-button @click="inputDigit(8)">8</el-button>
<el-button @click="inputDigit(9)">9</el-button>
<el-button @click="inputOperator('*')">*</el-button>
<el-button @click="inputDigit(4)">4</el-button>
<el-button @click="inputDigit(5)">5</el-button>
<el-button @click="inputDigit(6)">6</el-button>
<el-button @click="inputOperator('-')">-</el-button>
<el-button @click="inputDigit(1)">1</el-button>
<el-button @click="inputDigit(2)">2</el-button>
<el-button @click="inputDigit(3)">3</el-button>
<el-button @click="inputOperator('+')">+</el-button>
<el-button @click="inputDigit(0)" class="zero">0</el-button>
<el-button @click="inputDot">.</el-button>
<el-button @click="calculate">=</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayValue: '0', // 顯示的值
firstOperand: null, // 第一個(gè)操作數(shù)
waitingForSecondOperand: false, // 是否等待第二個(gè)操作數(shù)
operator: null, // 當(dāng)前的操作符
currentExpression: '' // 用于存儲(chǔ)當(dāng)前運(yùn)算過(guò)程
};
},
methods: {
// 輸入數(shù)字
inputDigit(digit) {
// 如果運(yùn)算結(jié)束并開(kāi)始輸入新數(shù)字，清空計(jì)算過(guò)程和顯示屏
if (this.firstOperand !== null && this.operator === null) {
this.displayValue = String(digit);
this.currentExpression = ''; // 清空當(dāng)前運(yùn)算過(guò)程
this.firstOperand = null; // 重置操作數(shù)
} else if (this.waitingForSecondOperand) {
this.displayValue = String(digit);
this.waitingForSecondOperand = false;
} else {
this.displayValue = this.displayValue === '0' ? String(digit) : this.displayValue + String(digit);
}
this.updateExpression();
},
// 輸入小數(shù)點(diǎn)
inputDot() {
if (!this.displayValue.includes('.')) {
this.displayValue += '.';
}
this.updateExpression();
},
// 處理運(yùn)算符
inputOperator(nextOperator) {
const inputValue = parseFloat(this.displayValue);
if (this.operator && this.waitingForSecondOperand) {
this.operator = nextOperator;
this.updateExpression();
return;
}
if (this.firstOperand === null) {
this.firstOperand = inputValue;
} else if (this.operator) {
const result = this.performCalculation(this.firstOperand, inputValue, this.operator);
this.displayValue = String(result);
this.firstOperand = result;
}
this.waitingForSecondOperand = true;
this.operator = nextOperator;
this.updateExpression();
},
// 執(zhí)行計(jì)算
performCalculation(firstOperand, secondOperand, operator) {
switch (operator) {
case '+':
return firstOperand + secondOperand;
case '-':
return firstOperand - secondOperand;
case '*':
return firstOperand * secondOperand;
case '÷':
return firstOperand / secondOperand;
default:
return secondOperand;
}
},
// 計(jì)算結(jié)果
calculate() {
// 如果未輸入第二個(gè)操作數(shù)，直接返回，不執(zhí)行計(jì)算
if (this.operator && this.waitingForSecondOperand) {
return;
}
if (this.operator) {
const inputValue = parseFloat(this.displayValue);
const secondOperand = this.waitingForSecondOperand ? this.firstOperand : inputValue; // 如果沒(méi)有第二個(gè)操作數(shù)，則使用第一個(gè)操作數(shù)
const result = this.performCalculation(this.firstOperand, secondOperand, this.operator);
// 完整地記錄本次運(yùn)算過(guò)程
this.currentExpression = `${this.firstOperand} ${this.operator} ${secondOperand} = ${result}`;
this.displayValue = String(result);
this.firstOperand = result;
this.operator = null;
this.waitingForSecondOperand = false;
}
},
// 清除
clear() {
this.displayValue = '0';
this.firstOperand = null;
this.operator = null;
this.waitingForSecondOperand = false;
this.currentExpression = ''; // 清空當(dāng)前運(yùn)算過(guò)程
},
// 刪除最后一個(gè)輸入的字符
deleteLast() {
this.displayValue = this.displayValue.length > 1 ? this.displayValue.slice(0, -1) : '0';
this.updateExpression();
},
// 改變符號(hào)
toggleSign() {
this.displayValue = String(parseFloat(this.displayValue) * -1);
this.updateExpression();
},
// 處理百分比
inputPercent() {
this.displayValue = String(parseFloat(this.displayValue) / 100);
this.updateExpression();
},
// 更新當(dāng)前運(yùn)算過(guò)程的顯示內(nèi)容
updateExpression() {
if (this.firstOperand !== null && this.operator) {
// 如果還未輸入第二個(gè)操作數(shù)，不顯示 displayValue
this.currentExpression = this.waitingForSecondOperand ?
`${this.firstOperand} ${this.operator}` :
`${this.firstOperand} ${this.operator} ${this.displayValue}`;
} else {
this.currentExpression = this.displayValue;
}
console.log('this.currentExpression', this.currentExpression)
}
}
};
</script>
<style scoped>
.calculator {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f1f1f1;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.expression {
min-height: 30px;
color: #888;
text-align: right;
font-size: 16px;
margin-bottom: 5px;
}
.display {
width: 100%;
min-height: 60px;
background-color: #333;
color: white;
text-align: right;
padding: 10px;
font-size: 24px;
border-radius: 5px;
margin-bottom: 10px;
word-wrap: break-word;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
width: 100%;
font-size: 18px;
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
.zero {
grid-column: span 2;
}
>>>.el-button+.el-button {
margin-left: 0;
}
</style>在項(xiàng)目中引用：
import Calculator from '@/components/common/calculator'
export default {
components:{
Calculator
},
}
使用標(biāo)簽即可：
<Calculator></Calculator>
以上就是vue自定義實(shí)現(xiàn)計(jì)算器組件(附完整代碼)的詳細(xì)內(nèi)容，更多關(guān)于Vue計(jì)算器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文介紹了Vue組件中props的三種聲明方式：數(shù)組寫法、對(duì)象寫法和TypeScript類型聲明寫法,數(shù)組寫法適用于快速原型開(kāi)發(fā),但缺乏類型校驗(yàn)；對(duì)象寫法提供了基本類型校驗(yàn)和默認(rèn)值設(shè)置；TypeScript類型聲明寫法結(jié)合了Vue的運(yùn)行時(shí)校驗(yàn)和TypeScript的靜態(tài)類型檢查2025-10-10
這篇文章主要介紹了vue 配置多頁(yè)面應(yīng)用的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue動(dòng)態(tài)綁定class的幾種常用方式小結(jié)
這篇文章主要介紹了vue動(dòng)態(tài)綁定class的幾種常用方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js常見(jiàn)的對(duì)象方法、數(shù)組方法進(jìn)行class動(dòng)態(tài)綁定相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
部署Vue項(xiàng)目到服務(wù)器后404錯(cuò)誤的原因及解決方案
文章介紹了Vue項(xiàng)目部署步驟以及404錯(cuò)誤的解決方案,部署步驟包括構(gòu)建項(xiàng)目、上傳文件、配置Web服務(wù)器、重啟Nginx和訪問(wèn)域名,404錯(cuò)誤通常是由于歷史模式問(wèn)題導(dǎo)致的,解決方法是修改Nginx配置,將所有頁(yè)面請(qǐng)求重定向到index.html,并在Vue應(yīng)用中覆蓋所有路由情況2025-02-02
vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
這篇文章主要介紹了vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue.js移動(dòng)端app實(shí)戰(zhàn)1：初始配置詳解
這篇文章主要介紹了vue.js移動(dòng)端app實(shí)戰(zhàn)1：初始配置詳解,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家分享了一篇值得收藏的vuejs安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了Vue使用Echart圖標(biāo)插件之柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue鍵盤事件點(diǎn)擊事件加native操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
文章介紹了vue中向子組件傳值并允許修改的機(jī)制,通過(guò)defineModel實(shí)現(xiàn)雙向綁定,它返回一個(gè)ref,并且可以配置底層prop的選項(xiàng),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-01-01