![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：代码冗余没关系的, 做对才重要
Collection
Collection
效果图如下：
代码如下：
<!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>