使用VUE的watch属性监听实现简单计算器

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用VUE的watch属性监听实现简单计算</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <p>简单计算器</p>
    <div class="app">
      <input type="number" v-model="num1" /> 
      <select v-model="calculate">
        <option>+</option>
        <option>-</option>
        <option>*</optionb>
        <option>/</option>
      </select>
      <input type="number" v-model="num2" /> =
      <input type="number" v-model="res" disabled />
    </div>
    <script>
      const app = new Vue({
        el: ".app",
        data: {
          num1: 0,
          num2: 0,
          res: 0,
          calculate:'+'
        },
        methods: {
            // 获取运算符进行相应计算
            cal(){
                switch(this.calculate){
                    case '+':
                        return parseFloat(this.num1) + parseFloat(this.num2);
                    break;
                    case '-':
                        return parseFloat(this.num1) - parseFloat(this.num2);
                    break;
                    case '*':
                        return parseFloat(this.num1) * parseFloat(this.num2);
                    break;
                    case '/':
                        return parseFloat(this.num1) / parseFloat(this.num2);
                    break;
                }
            },
        },
        // watch监听器
        watch: {
            // 监听第1个input变化
            num1(newVol,oldVol){
                this.res = this.cal(newVol,this.num2);
            },
            // 监听第2个input变化
            num2(newVol,oldVol){
                this.res = this.cal(newVol,this.num1);
            },
            // 监听第运算符变化
            calculate(newVol,oldVol){
                this.res = this.cal(newVol,this.num1);
            }
        }        
      });
    </script>
  </body>
</html>