1.使用表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hhhh</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<br />
结果:{{number1+number2}}--{{number1*number2}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
}
})
</script>
</html>
2.使用computed属性
input输入框定义符号，文本框绑定js内容，最后写computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hhhh</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2">
<span> = </span>
<input type="text" v-model="res">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
num1:"",
num2:"",
opt:"+",
},
computed:{
res(){
if(this.opt=="+")
{
return Number(this.num1)+Number(this.num2);
}
else if(this.opt=="-")
{
return parseInt(this.num1-this.num2);
}
else if (this.opt == "*")
{
return parseInt(this.num1 * this.num2);
}
else if (this.opt == "/") {
return parseInt(this.num1 / this.num2);
}
}
}
})
</script>
</html>
3.使用methods方法
input用v-model绑定，number转换数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hhhh</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="number1" />
<select v-model="opt">
<option value="1">+</option>
<option value="2">-</option>
<option value="3">*</option>
<option value="4">/</option>
</select>
<input type="text" v-model="number2" />
<input type="button"value="="@click="but" />
<input type="text" v-model="res" />
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:"",
number2:"",
res:"",
opt:"1"
},
methods:{
but(){
switch(this.opt){
case "1":
this.res=parseInt(this.number1)+parseInt(this.number2)
break;
case "2":
this.res=parseInt(this.number1)-parseInt(this.number2)
break;
case "3":
this.res=parseInt(this.number1)*parseInt(this.number2)
break;
case "4":
this.res=parseInt(this.number1)/parseInt(this.number2)
break;
}
}
}
});
</script>
</html>
4.使用watch监听器
使用watch监听器监视数据和运算符变化，任意一个值变化时重新计算结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hhhhh</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="text" v-model="num1" />
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="num2" />
<input type="text" v-model="res" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
num1:0,
num2:0,
res:null,
opt:'+'
},
methods:{
watch1(){
switch (this.opt) {
case '+':
this.res = Number(this.num1) + Number(this.num2);
break;
case '-':
this.res = Number(this.num1) - Number(this.num2);
break;
case '*':
this.res = Number(this.num1) * Number(this.num2);
break;
case '/':
this.res = Number(this.num1) / Number(this.num2);
break;
}
}
},
watch:{
num1:function(){
this.watch1()
},
num2:function(){
this.watch1()
},
opt:function(){
this.watch1()
}
},
created(){
this.watch1()
}
})
</script>
</body>
</html>
标签：opt,vue,num1,num2,res,Number,计算器,parseInt,四种 From： https://www.cnblogs.com/xsl6/p/17280527.html