目標：用三種方式實作簡易的計算器（計算屬性，監聽器，方法）
1.創建html，匯入vue，實體化vue物件，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://www.cnblogs.com/yhyh296/archive/2023/04/02/js/vue.js"></script>
</head>
<body>
<script>
var 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> var 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548984.html
標籤：其他