1.准备好Vue框架
2. 写好HTML布局
3.添加computed属性和watch完善计算机功能
1.准备好Vue框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
<script src="vue.js"></script>
</head>
<style>
#computer{
margin: 50px auto;
width: 500px;
height: 500px;
}
</style>
<body>
<div id="computer">
</div>
<script>
var vm = new Vue({
el:"#computer",
data(){
return{
}
}
</script>
</body>
</html>
2.编写好简易计算器的布局,并且使用select下拉框来放置计算符号,利用v-model的双向绑定,来绑定输入框,输出框,和计算符号。在imput输入框里使用v-model.number可以把绑定的内容转换为整型(避免计算的时候出现字符串拼接)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
<script src="vue.js"></script>
</head>
<style>
#computer{
margin: 50px auto;
width: 500px;
height: 500px;
}
</style>
<body>
<div id="computer">
<input type="text" placeholder="请输入第一个数" v-model.number="num1">
<select v-model="opt">
<option >+</option>
<option >-</option>
<option >*</option>
<option >/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="num2">
<h3>结果:{{num1}}+{{num2}}={{result}}</h3>
<button @Click="terms">计算</button>
</div>
<script>
var vm = new Vue({
el:"#computer",
data(){
num1:0,
num2:0,
result:0,
opt:"+"
}
</script>
</body>
</html>
3.通过按钮的点击事件做一个简易的计算,利用条件语句对计算符号下拉框传过来的值进行匹配,并对两个输入框的内容进行计算处理,最后返回一个结果值打印到输出的位置。
methods:{
terms(){
if(this.opt == "+"){
this.result=this.num1+this.num2;
}else if (this.opt == "-") {
this.result=this.num1-this.num2;
}else if (this.opt == "*") {
this.result=this.num1*this.num2;
}else{
this.result=this.num1/this.num2;
}
}
4.为了实现实时处理计算功能,需要加入computed和watch属性。
1.利用watch监听两个输入框和计算符号的改变,并在改变的时候进行计算。
2.利用computed属性来进行计算,可以省去点击按钮才能计算出结果的步骤,并且computed 可以简化代码逻辑更加容易看懂。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
<script src="vue.js"></script>
</head>
<style>
#computer{
margin: 50px auto;
width: 500px;
height: 500px;
}
</style>
<body>
<div id="computer">
<input type="text" placeholder="请输入第一个数" v-model.number="num1">
<select v-model="opt">
<option >+</option>
<option >-</option>
<option >*</option>
<option >/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="num2">
<h3>结果:{{num1}}+{{num2}}={{result}}</h3>
<button @Click="terms">计算</button>
</div>
<script>
var vm = new Vue({
el:"#computer",
data(){
return{
num1:0,
num2:0,
result:0,
opt:"+"
}
},
methods:{
terms(){
if(this.opt == "+"){
this.result=this.num1+this.num2;
}else if (this.opt == "-") {
this.result=this.num1-this.num2;
}else if (this.opt == "*") {
this.result=this.num1*this.num2;
}else{
this.result=this.num1/this.num2;
}
}
},
watch:{
opt(newValue,oldValue){
if(newValue == "+"){
this.result=this.num1+this.num2;
}else if (newValue == "-") {
this.result=this.num1-this.num2;
}else if (newValue == "*") {
this.result=this.num1*this.num2;
}else{
this.result=this.num1/this.num2;
}
},
num1(newValue,oldValue){
if(this.opt == "+"){
this.result=newValue+this.num2;
}else if (this.opt == "-") {
this.result=newValue-this.num2;
}else if (this.opt == "*") {
this.result=newValue*this.num2;
}else{
this.result=newValue/this.num2;
}
},
num2(newValue,oldValue){
if(this.opt == "+"){
this.result=this.num1+newValue;
}else if (this.opt == "-") {
this.result=this.num1-newValue;
}else if (this.opt == "*") {
this.result=this.num1*newValue;
}else{
this.result=this.num1/newValue;
}
}
},
computed:{
terms(){
if(this.opt == "+"){
this.result=this.num1+this.num2;
}else if (this.opt == "-") {
this.result=this.num1-this.num2;
}else if (this.opt == "*") {
this.result=this.num1*this.num2;
}else{
this.result=this.num1/this.num2;
}
}
}
})
</script>
</body>
</html>