老师有几个问题，麻烦帮忙看一下

来源：3-23 自由编程

lunaliu

2021-03-03 17:12:18

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
  <div id="app">
    <input type="text" v-model.number = 'value1' />
    <select v-model='operation'>
        <option value="+" selected>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model.number = 'value2' />
    <button @click='equal'>=</button>
    <input type="text" v-model='total' />
  </div>
  <script>
    new Vue({
      el:'#app',
      //是不是在input输入后，一定要在data中把输入的value取出来才能用
      data:{
        value1:null,
        value2:null,
        total:null,
        operation:'+' //我直接在页面上写 selected不好使，页面不显示对应value为啥呢？
      },
      methods:{
        equal(){
         //如果不写switch，怎么能执行运算呢？ this.total = this.value1 + (this.operation) + this.value2
         switch(this.operation){
          case '+':
            this.total = this.value1 + this.value2;
            break;
          case '-':
            this.total = this.value1 - this.value2;
            break;
          case '*':
            this.total = this.value1 * this.value2;
            break;
          case '/':
            this.total = this.value1 / this.value2;
            break;
         }
        },

      },
      watch:{
        operation:function(){
            this.equal();
        }
      }

    })
  </script>
</body>

</html>