如何用vue.js写一个计算器

admin 2026年02月08日 01:53 101 0

使用Vue.js开发计算器，首先创建Vue实例，定义data属性存储当前输入值、表达式和计算结果，在模板中设计显示屏和按钮布局，通过v-model双向绑定输入值，为按钮添加@click事件处理函数，实现逻辑包括：数字按钮拼接输入，运算符记录表达式，等号调用eval或自定义解析函数计算结果，清空按钮重置数据，可封装按钮为子组件提升复用性，利用计算属性处理表达式格式化，最终实现基础四则运算功能，并通过样式优化交互体验。

使用Vue.js构建功能完整的计算器应用

计算器作为前端开发领域经典的入门实践项目，不仅能够帮助我们深入理解框架的核心特性（如数据绑定、事件处理、状态管理），还能有效锻炼逻辑拆解与组件化设计能力，本文将以Vue.js 3为例，从零开始构建一个功能完备的计算器应用，支持基础四则运算、清空、删除及小数点输入，并通过精美的样式设计提升用户体验，让你快速掌握Vue.js的实际开发技巧。

准备工作：开发环境搭建与项目初始化

在开始编码之前,请确保您的开发环境已安装以下必备工具：

Node.js（建议LTS版本）：用于运行Vue CLI和npm包管理器
Vue CLI：Vue.js的官方脚手架工具，可通过以下命令全局安装：
```
npm install -g @vue/cli
```

创建一个新的Vue项目：

vue create calculator-app

在项目创建过程中，建议选择"Manually select features"选项,勾选以下特性：

Babel：用于转译ES6+语法，确保代码在旧版浏览器中正常运行
Router：虽然本项目暂不需要路由，但保留该选项可为后续功能扩展提供便利

其余配置保持默认即可，项目创建完成后,进入项目目录：

cd calculator-app

计算器功能分析与UI设计

功能需求分析

一个功能完整的计算器应用应支持以下核心功能：

数字输入：0-9数字键的输入处理
小数点输入：支持浮点数运算
基础运算：加(+)、减(-)、乘(×)、除(÷)四则运算
清空功能：清除当前输入（C键）
删除功能：删除最后一位数字（←键）
计算结果：执行运算并显示结果（=键）

UI布局设计

计算器界面可分为两个主要区域：

显示屏：位于顶部，用于实时显示当前输入的数字和计算结果
按钮区：位于下方，包含数字按钮、运算符按钮和功能按钮

布局采用CSS Grid实现，按钮按4×5的网格排列，样式设计参考现代计算器界面，通过不同的颜色和间距区分按钮类型,提升视觉层次感。

核心实现：组件拆分与代码编写

组件结构设计

本项目采用单一组件架构，创建Calculator.vue组件并放置在src/components目录下，在src/App.vue中引入并使用该组件,保持项目结构清晰简洁。

Calculator.vue组件实现

（1）模板（Template）：定义UI结构

<template>
  <div class="calculator">
    <div class="display">{{ currentNumber || '0' }}</div>
    <div class="buttons">
      <button @click="clear" class="btn function">C</button>
      <button @click="deleteLast" class="btn function">←</button>
      <button @click="appendOperator('/')" class="btn operator">÷</button>
      <button @click="appendOperator('*')" class="btn operator">×</button>
      <button @click="appendNumber('7')" class="btn number">7</button>
      <button @click="appendNumber('8')" class="btn number">8</button>
      <button @click="appendNumber('9')" class="btn number">9</button>
      <button @click="appendOperator('-')" class="btn operator">-</button>
      <button @click="appendNumber('4')" class="btn number">4</button>
      <button @click="appendNumber('5')" class="btn number">5</button>
      <button @click="appendNumber('6')" class="btn number">6</button>
      <button @click="appendOperator('+')" class="btn operator">+</button>
      <button @click="appendNumber('1')" class="btn number">1</button>
      <button @click="appendNumber('2')" class="btn number">2</button>
      <button @click="appendNumber('3')" class="btn number">3</button>
      <button @click="calculate" class="btn equals" rowspan="2">=</button>
      <button @click="appendNumber('0')" class="btn number zero">0</button>
      <button @click="appendDecimal('.')" class="btn number">.</button>
    </div>
  </div>
</template>

（2）脚本（Script）：定义数据与方法

<script>
export default {
  name: 'Calculator',
  data() {
    return {
      currentNumber: '0', // 当前显示的数字
      previousNumber: null, // 上一个输入的数字（用于运算）
      operator: null, // 当前选择的运算符
      shouldResetScreen: false, // 是否需要重置显示屏（输入运算符后为true）
    };
  },
  methods: {
    // 输入数字
    appendNumber(num) {
      if (this.shouldResetScreen) {
        this.currentNumber = '0';
        this.shouldResetScreen = false;
      }
      if (this.currentNumber === '0') {
        this.currentNumber = num;
      } else {
        this.currentNumber += num;
      }
    },
    // 输入小数点
    appendDecimal() {
      if (this.shouldResetScreen) {
        this.currentNumber = '0';
        this.shouldResetScreen = false;
      }
      if (!this.currentNumber.includes('.')) {
        this.currentNumber += '.';
      }
    },
    // 输入运算符
    appendOperator(op) {
      if (this.operator && !this.shouldResetScreen) {
        this.calculate();
      }
      this.previousNumber = this.currentNumber;
      this.operator = op;
      this.shouldResetScreen = true;
    },
    // 计算结果
    calculate() {
      if (!this.operator || this.shouldResetScreen) return;
      const prev = parseFloat(this.previousNumber);
      const current = parseFloat(this.currentNumber);
      let result;
      switch (this.operator) {
        case '+':
          result = prev + current;
          break;
        case '-':
          result = prev - current;
          break;
        case '*':
          result = prev * current;
          break;
        case '/':
          if (current === 0) {
            alert('除数不能为零！');
            return;
          }
          result = prev / current;
          break;
        default:
          return;
      }
      this.currentNumber = result.toString();
      this.operator = null;
      this.previousNumber = null;
      this.shouldResetScreen = true;
    },
    // 清空计算器
    clear() {
      this.currentNumber = '0';
      this.previousNumber = null;
      this.operator = null;
      this.shouldResetScreen = false;
    },
    // 删除最后一位数字
    deleteLast() {
      if (this.currentNumber.length > 1) {
        this.currentNumber = this.currentNumber.slice(0, -1);
      } else {
        this.currentNumber = '0';
      }
    }
  }
};
</script>

（3）样式（Style）：美化界面

<style scoped>
.calculator {
  max-width: 320px;
  margin: 50px auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: #f5f5f5;
}
.display {
  background-color: #333;
  color: white;
  font-size: 2.5rem;
  padding: 20px;
  text-align: right;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  word-wrap: break-word;
  word-break: break-all;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: #ddd;
}
.btn {
  border: none;
  font-size: 1.5rem;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}
.btn:hover {

标签： #js #计算 #器 #开发