vue项目中实现计算器

//静态页面 template里面的内容

  
      <div id='app'>  
      <input type="text" v-model:value="input1">   
      <select name="" id="" v-model:value="opration">  
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
      </select>
      <input type="text" v-model:value="input2">   
      <button @click="calc">=</button>
      <input type="text" v-model:value="input3">     
  </div>
  
      ```

script里面
```

    data: {
        input1:0,
        input2:0,
        input3:0,
        opration:"+"
    },
    methods:{
        calc(){
            console.log(this.input1,this.input2,this.input3,this.opration);
                if (this.opration=="+") {
                    // 注意事项： 加号的时候回出现 字符串拼接  所以  需要转换成数字类型
                    this.input3=Number(this.input1)+Number(this.input2)
                }else if(this.opration=="-") {
                    this.input3=this.input1-this.input2
                }else if(this.opration=="*") {
                    this.input3=this.input1*this.input2
                }else if(this.opration=="/") {
                    this.input3=this.input1/this.input2
                }               
        }
    }

效果图