vue3.0实现简易版计算器

通过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>

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