vue3.0实现简易版计算器_vue3简易版计算机-优快云博客

本文链接：https://blog.youkuaiyun.com/Handsome_gir/article/details/130100443

该文章演示了如何利用Vue3的基础知识创建一个简单的计算器应用。用户需在两个输入框中输入数字，然后点击加、减、乘、除或清除按钮进行计算或清空。计算结果会显示在页面上，且提供了错误检查，确保在执行运算前两个数字都已输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过vue3的基础知识实现简易版的计算器小示例
在这里插入图片描述
通过两个数字计算对应的结果，两个输入框必须都输入，输入后点击对应的按钮计算对应的结果，将结果展示页面上，点击clear将输入的数字和结果清空，话不多说，直接上代码。

template部分

<template>
  <div>
    <h1>计算结果：{{numCount}}</h1>
    <div>数字1：<input type="number" v-model.trim="form.num1" ></div>
    <div>数字2：<input type="number" v-model.trim="form.num2" ></div>
    <div class="buttonList">
      <button @click="btn('+')">+</button>
      <button @click="btn('-')">-</button>
      <button @click="btn('*')">*</button>
      <button @click="btn('/')">/</button>
      <button @click="btn('c')">clear</button>
    </div>
  </div>
</template>

script部分

<script>
import {ref,reactive} from 'vue'
export default{
  setup(){
    let numCount=ref(0);
    let form=reactive({
      num1:'',
      num2:''
    })
    function btn(type){
      if((!form.num1 || !form.num2)&&type!='c'){
        alert('请输入数值！');
        return
      }
      switch(type){
        case '+':
          numCount.value=(form.num1-0)+(form.num2-0);
        break;
        case '-':
          numCount.value=(form.num1-0)-(form.num2-0);
        break;
        case '*':
          numCount.value=(form.num1-0)*(form.num2-0);
        break;
        case '/':
          numCount.value=(form.num1-0)/(form.num2-0);
        break;
        case 'c':
          numCount.value=0;
          form.num1="";
          form.num2="";
        break;
      }
    }
    return {
      numCount,
      form,
      btn
    }
  }
}
</script>

style部分

<style>
.buttonList{
  margin-top: 10px;
}
button{
  padding: 1px 10px;
  margin: 0 5px;
}
</style>

这样一个简易版的计算器就做好啦。