1. 使用计算属性制作计算器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>select {width: 100px;}</style></head><body><div class="app"><input type="number" v-model="num1"> + <input type="number" v-model="num2">=<span>{{add}}</span><br><input type="number" v-model="num3"> - <input type="number" v-model="num4">=<span>{{minus}}</span><br><input type="number" v-model="num5"> * <input type="number" v-model="num6">=<span>{{multi}}</span><br><input type="number" v-model="num7"> / <input type="number" v-model="num8">=<span>{{division}}</span></div><script>const vm = new Vue({el: '.app',data: {num1: 0,num2: 0,num3: 0,num4: 0,num5: 0,num6: 0,num7: 0,num8: 0,},computed: {add() {return this.num1 * 1 + this.num2 * 1;},minus() {return this.num3 * 1 - this.num4 * 1;},multi() {return this.num5 * 1 * this.num6 * 1;},division() {return this.num7 * 1 / this.num8 * 1;},},});</script></body></html>
这样制作的计算器有一个缺点：不能手动去选择运算符，我只能以这样的方式分为了四个计算式，因为computed属性，会自动完成计算，不能动态的去设置其获取结果的方式，而且分为四个计算式以后，数据对象data中的属性太多了，数据太复杂，所以下面另外采用一种方式：使用侦听属性来制作计算器，它可以动态去侦听运算符的变化以及文本框的变化，这样就只需要一个计算式就能完成
2. 使用侦听属性制作计算器
2.1 先制作一个加法器，了解原理
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div class="app"><input type="number" v-model="num1"> +<input type="number" v-model="num2">= <span>{{res}}</span></div><script>const vm = new Vue({el: ".app",data: {num1: 0,num2: 0,res: 0,},// 定义一个公共方法，求和运算methods: {add(n1, n2) {this.res = n1 * 1 + n2 * 1;}},// 监听两个文本框中数值的变化，一旦变化就调用求和运算watch: {num1() {// 因为使用了 v-model 数据双向绑定，此时传入的参数就是变化后真实的值this.add(this.num1, this.num2);},num2() {this.add(this.num1, this.num2);},},});</script></body></html>
基于上面案例，可以将两个input框中间的+号运算符，使用一个下拉列表来代替，下拉列表中就保存 + - * / 四个运算符，然后在methods属性中做一个switch判断，使用不同的运算符就将结果赋于不同的运算值，最后在watch侦听属性中，侦听运算符的变化，就可以动态的获取结果
2.2 制作加减乘除计算器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div class="app"><input type="number" v-model="num1"><!-- 使用v-model 双向绑定此时下拉列表的值value --><select v-model="cal"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="number" v-model="num2">= <span>{{res}}</span></div><script>const vm = new Vue({el: ".app",data: {// 设置默认值num1: 0,num2: 0,res: 0,cal: "+",},// 根据运算符的值（this.cal）定义不同的运算方法methods: {jisuan(n1, n2) {switch (this.cal) {case "+":this.res = (n1 * 1) + (n2 * 1);break;case "-":this.res = (n1 * 1) - (n2 * 1);break;case "*":this.res = (n1 * 1) * (n2 * 1);break;case "/":this.res = (n1 * 1) / (n2 * 1);break;}},},// 侦听属性watch: {// 监听第一个输入框num1() {this.jisuan(this.num1, this.num2);},// 监听第二个输入框num2() {this.jisuan(this.num1, this.num2);},// 监听运算符cal() {this.jisuan(this.num1, this.num2);}},});</script></body>
