设计构想：利用计算属性，监听器和常规计算三种方式实现加减乘除计算。
代码实现：
第一步：
新建项目。创建一个新的web项目，引入vue.js文件。
第二步：
设计输入框。利用input标签，创建一个文本类型的输入框，利用v-model.number实现双向绑定，让.number把num1当成字符串处理。
利用placeholder方法设置在未输入数据时显示的内容，效果如下：
2.1.计算属性的输入框：
2.2.监听器计算器的输入框：
2.3.计算方法计算器的输入框：
第三步：
实现计算功能。
3.1.计算属性：
利用if和else if程序，选择不同符号更改对应的方法，实现加减乘除运算。
3.2.监听属性：
利用watch标签监听num3,num4,sym1输入框和菜单数据的变化，在运算符号菜单发生变化时，改变对应的方法。
4.3计算方法实现计算器：
利用if和else if程序，选择不同符号更改对应的方法，实现加减乘除运算。
第五步：
完善代码。定义计算器输入框和运算符号菜单默认值，使页面更加美观。
完整代码展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 计算属性 --> <input type="text" placeholder="请输入第一个数" v-model.number="num1"> <!-- 创建一个输入框，文本类型，placeholder在未输入数据时显示，v-model双向绑定.NUMBER把num1当成字符串处理 --> <select v-model="sym"> <!-- 双向绑定 --> <option>+</option> <option>-</option> <option>*</option> <option>/</option> <!-- 下拉菜单 --> </select> <input type="text" placeholder="请输入第二个数" v-model.number="num2"> <br> 答案:{{res}}<br> <!-- 监听器 --> <input type="text" placeholder="请输入第一个数" v-model.number="num3"> <select v-model="sym1"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> <input type="text" placeholder="请输入第二个数" v-model.number="num4"> <br> 答案:{{answ1}} <br> <!-- 常规方法 --> <input type="text" placeholder="请输入第一个数" v-model.number="num5" @change="change"> <!-- @change当输入框里面发生变化，会调用change方法 --> <select v-model="sym2" @change="change"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> <input type="text" placeholder="请输入第二个数" v-model.number="num6" @change="change"> <br> 答案:{{answ2}} </div> <script> var vm = new Vue({ el: "#app", // 作用范围 data: { // 初始化变量 num1:0, num2:0, sym:"+", answer:"", num3:0, num4:0, sym1:"+", answ1:"", num5:0, num6:0, sym2:"+", answ2:"" }, methods:{ // 方法属性 change(){ if(this.sym2 == "+") { this.answ2 = this.num5 + this.num6; } else if(this.sym2 == "-") { this.answ2 = this.num5 - this.num6; } else if(this.sym2 == "*") { this.answ2 = this.num5 * this.num6; } else if(this.sym2 == "/"){ this.answ2 = this.num5 / this.num6; } } }, computed:{ // 计算属性 res(){ if(this.sym == "+") { return this.num1 + this.num2; } else if(this.sym == "-") { return this.num1 - this.num2; } else if(this.sym == "*") {
return this.num1 * this.num2; } else if(this.sym == "/"){ return this.num1 / this.num2; } } }, watch:{ // 监听器属性 num3(val){ if(this.sym1 == "+") { this.answ1 = val + this.num4; } else if(this.sym1 == "-") { this.answ1 = val - this.num4; } else if(this.sym1 == "*") { this.answ1 = val * this.num4; } else if(this.sym1 == "/"){ this.answ1 = val / this.num4; } }, num4(val){ if(this.sym1 == "+") { this.answ1 = this.num3 + val; } else if(this.sym1 == "-") { this.answ1 = this.num3 - val; } else if(this.sym1 == "*") { this.answ1 = this.num3 * val; } else if(this.sym1 == "/"){ this.answ1 = this.num3 / val; } }, sym1(val){ if(val == "+") { this.answ1 = this.num3 + this.num4; } else if(val == "-") { this.answ1 = this.num3 - this.num4; } else if(val == "*") { this.answ1 = this.num3 * this.num4; } else if(val == "/"){ this.answ1 = this.num3 / this.num4; } } } }) </script> </body> </html>
附件分享：
链接：https://pan.baidu.com/s/1zpJSjkYENCtM8ffdOo1BMw?pwd=zzm3
提取码：zzm3
--来自百度网盘超级会员V2的分享