使用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>
总结：
- 虽然很简单做出来了，但感觉代码太冗余。