首先我们应该在hbuilder创建一个新的项目,再在js中引入vue.js
1.使用方法
在下列代码中我们要对运算符进行绑定,接着添加计算按钮并设置点击事件,在方法中使用switch语句对运算符进行判断,改变结果的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="zed">
<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
<button @click="jisuan">计算</button>
<br />
结果:{{result}}<br />
</div>
</body>
<script>
var vm = new Vue({
el:"#zed",
data:{
number1:"",
number2:"",
result:"",
opt:"+"
},
methods:{
jisuan(){
switch(this.opt){
case"+":
this.result=this.number1+this.number2;
break;
case"-":
this.result=this.number1-this.number2;
break;
case"*":
this.result=this.number1*this.number2;
break;
case"/":
this.result=this.number1/this.number2;
break;
}
}
}
});
</script>
</html>
下图是效果图
2.接下来使用表达式
首先设置两个输入框来进行绑定我们要计算的值,这里要注意的是我们计算的类型为数字型,所以要使用v-model.numeber来设置,结果是用表达式的形式直接对两个输入的数值进行加减乘除操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="zed">
<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
<select>
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<!--placeholder作用为当文本框中无内容时的提示字段 -->
<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
<br />
结果:<br />
+:{{number1+number2}}<br />
-:{{number1-number2}}<br />
*:{{number1*number2}}<br />
/:{{number1/number2}}<br />
</div>
</body>
<script>
var vm = new Vue({
el:"#zed",
data:{
number1:"",
number2:""
}
});
</script>
</html>
下图为效果图
3.然后使用计算属性
跟方法差不多,只不过将methods换成了computed,并在方法中加上了return。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="zed">
<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
<button @click="jisuan">计算</button>
<br />
结果:{{result}}<br />
</div>
</body>
<script>
var vm = new Vue({
el:"#zed",
data:{
number1:"",
number2:"",
result:"",
opt:"+"
},
computed:{
jisuan(){
switch(this.opt){
case"+":
this.result=this.number1+this.number2;
break;
case"-":
this.result=this.number1-this.number2;
break;
case"*":
this.result=this.number1*this.number2;
break;
case"/":
this.result=this.number1/this.number2;
break;
}
return this.result;
}
}
});
</script>
</html>
下面是效果图
4. 最后使用监听器
在监听器中要对第一个数第二个数还有运算符进行监听,当他们发生变化时执行switch语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="zed">
<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
<br />
结果:{{result}}<br />
</div>
</body>
<script>
var vm = new Vue({
el:"#zed",
data:{
number1:"",
number2:"",
result:"",
opt:""
},
watch:{
number1:function(num1){
switch(this.opt){
case"+":
this.result=num1+this.number2;
break;
case"-":
this.result=num1-this.number2;
break;
case"*":
this.result=num1*this.number2;
break;
case"/":
this.result=num1/this.number2;
break;
}
},
number2:function(num2){
switch(this.opt){
case"+":
this.result=this.number1+num2;
break;
case"-":
this.result=this.number1-num2;
break;
case"*":
this.result=this.number1*num2;
break;
case"/":
this.result=this.number1/num2;
break;
}
},
opt:function(){
switch(this.opt){
case"+":
this.result=this.number1+this.number2;
break;
case"-":
this.result=this.number1-this.number2;
break;
case"*":
this.result=this.number1*this.number2;
break;
case"/":
this.result=this.number1/this.number2;
break;
}
}
}
});
</script>
</html>
下面是效果图
以上就是本期内容