设计构想：利用计算属性，监听器和常规计算三种方式实现加减乘除计算。
代码实现：
第一步：
新建项目。创建一个新的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的分享
标签：num4,val,num3,实现,else,简易,sym1,answ1,计算器 From： https://www.cnblogs.com/letter7/p/17280798.html