目标：用三种方式实现简易的计算器（计算属性，监听器，方法）
1.创建html，导入vue，实例化vue对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<script>
const vm = new Vue({}）
2.在body标签下创建个input标签，计算符用下拉菜单来表示。
此处的v-model.number实现双向绑定且让后边的数字当成数字处理，否则会当成字符串处理，
placeholder="请输入第一个数"，让输入框在未输入数据时显示“请输入第一个数字”，
后续的两种方式的计算器也都是用类似于这种形式。
此处为用计算属性实现的html部分，结尾的res为计算属性。
<input type="text" placeholder="请输入第一个数" v-model.number="num1">
<select v-model="sign">
<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="sign1">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="num4"> <br>
答案:{{res1}} <br>
用方法实现计算功能
此处给每个输入框设置了一个监听事件，当输入框的数据发生变化且失去焦点，则自动执行“change”方法。
<input type="text" placeholder="请输入第一个数" v-model.number="num5" @change="change">
<select v-model="sign2" @change="change">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="num6" @change="change"> <br>
答案:{{res2}}
3.完善vue的数据属性。
给每一个计算器的两个数字都给定义，定义为num1，num2...........，结果定义两个为res2，res3.各个操作符都定义为sign1，sign2，sign3.以备后续使用。
const vm = new Vue({
el: "#app",
data: {
num1:0,
num2:0,
sign:"+",
num3:0,
num4:0,
sign1:"+",
res1:"",
num5:0,
num6:0,
sign2:"+",
res2:""
},
</script>
4.编写方法实现计算功能
4.1.用计算属性实现
computed:{
res(){
if(this.sign === "+") {
return this.num1 + this.num2;
} else if(this.sign === "-") {
return this.num1 - this.num2;
} else if(this.sign === "*") {
return this.num1 * this.num2;
} else if(this.sign === "/"){
return this.num1 / this.num2;
}
}
},
4.2用监听器实现
逻辑如下：watch{}部分是一个监听器，用于监听num3，num4和sign1数据的变化，当他们的值发生变化之后，自动触发对应的方法，更新res1的值。
watch:{
num3(val){
if(this.sign1 === "+") {
this.res1 = val + this.num4;
} else if(this.sign1 === "-") {
this.res1 = val - this.num4;
} else if(this.sign1 === "*") {
this.res1 = val * this.num4;
} else if(this.sign1 === "/"){
this.res1 = val / this.num4;
}
},
num4(val){
if(this.sign1 === "+") {
this.res1 = this.num3 + val;
} else if(this.sign1 === "-") {
this.res1 = this.num3 - val;
} else if(this.sign1 === "*") {
this.res1 = this.num3 * val;
} else if(this.sign1 === "/"){
this.res1 = this.num3 / val;
}
},
sign1(val){
if(val === "+") {
this.res1 = this.num3 + this.num4;
} else if(val === "-") {
this.res1 = this.num3 - this.num4;
} else if(val === "*") {
this.res1 = this.num3 * this.num4;
} else if(val === "/"){
this.res1 = this.num3 / this.num4;
}
}
}
4.3用方法实现。（方法的实现逻辑与计算属性的逻辑一致）
methods:{
change(){
if(this.sign2 === "+") {
this.res2 = this.num5 + this.num6;
} else if(this.sign2 === "-") {
this.res2 = this.num5 - this.num6;
} else if(this.sign2 === "*") {
this.res2 = this.num5 * this.num6;
} else if(this.sign2 === "/"){
this.res2 = this.num5 / this.num6;
}
}
}
5.完整代码实现及效果
<!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">
<select v-model="sign">
<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="sign1">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="num4"> <br>
答案:{{res1}} <br>
<input type="text" placeholder="请输入第一个数" v-model.number="num5" @change="change">
<select v-model="sign2" @change="change">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="num6" @change="change"> <br>
答案:{{res2}}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
num1:0,
num2:0,
sign:"+",
num3:0,
num4:0,
sign1:"+",
res1:"",
num5:0,
num6:0,
sign2:"+",
res2:""
},
methods:{
change(){
if(this.sign2 === "+") {
this.res2 = this.num5 + this.num6;
} else if(this.sign2 === "-") {
this.res2 = this.num5 - this.num6;
} else if(this.sign2 === "*") {
this.res2 = this.num5 * this.num6;
} else if(this.sign2 === "/"){
this.res2 = this.num5 / this.num6;
}
}
},
computed:{
res(){
if(this.sign === "+") {
return this.num1 + this.num2;
} else if(this.sign === "-") {
return this.num1 - this.num2;
} else if(this.sign === "*") {
return this.num1 * this.num2;
} else if(this.sign === "/"){
return this.num1 / this.num2;
}
}
},
watch:{
num3(val){
if(this.sign1 === "+") {
this.res1 = val + this.num4;
} else if(this.sign1 === "-") {
this.res1 = val - this.num4;
} else if(this.sign1 === "*") {
this.res1 = val * this.num4;
} else if(this.sign1 === "/"){
this.res1 = val / this.num4;
}
},
num4(val){
if(this.sign1 === "+") {
this.res1 = this.num3 + val;
} else if(this.sign1 === "-") {
this.res1 = this.num3 - val;
} else if(this.sign1 === "*") {
this.res1 = this.num3 * val;
} else if(this.sign1 === "/"){
this.res1 = this.num3 / val;
}
},
sign1(val){
if(val === "+") {
this.res1 = this.num3 + this.num4;
} else if(val === "-") {
this.res1 = this.num3 - this.num4;
} else if(val === "*") {
this.res1 = this.num3 * this.num4;
} else if(val === "/"){
this.res1 = this.num3 / this.num4;
}
}
}
})
</script>
</body>
</html>
标签：num4,val,num3,res1,else,简易,三种,sign1,计算器 From： https://www.cnblogs.com/yhyh296/p/17280304.html