vue实现简易计算器的4种方法举例
作者：非必要不输出
这篇文章主要给大家介绍了关于vue实现简易计算器的4种方法,文中通过代码介绍的非常详细,对大家学习或者使用vue觉有一定的参考借鉴价值,需要的朋友可以参考下
一，使用表达式实现计算器：
1.1，大致内容都差不多，两个<input>输入框,使用v-if对表达式的运算符进行切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
//这里得type如果写number，后面的绑定就不用加上“.number”
<input type="text" v-model.number="num1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
// 同上
<input type="text" v-model.number="num2" />
<br />
<div>
<p v-if="opt=='+'">结果：{{num1+num2}}</p>
<p v-if="opt=='-'">结果：{{num1-num2}}</p>
<p v-if="opt=='*'">结果：{{num1*num2}}</p>
<p v-if="opt=='/'">结果：{{num1/num2}}</p>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
num1:0,
num2:0,
opt:"*"
}
})
</script>
</html>二，使用计算属性（computed）实现简易计算器
2.1，HTML代码定义了一个输入和输出元素，两个输入框，使用下拉框，选择运算符。
2.2，计算属性根据选择的操作符将两个数字进行计算，并将结果返回给HTML中的输出元素。当用户更改输入元素中的值时，计算属性将自动重新计算结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="text" v-model="n1"/>
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="n2"/>
<input type="text" v-model="result"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
opt:'+'
},
computed:{
result(){
switch (this.opt) {
case '+':
return Number(this.n1) + Number(this.n2);
break;
case '-':
return Number(this.n1) - Number(this.n2);
break;
case '*':
return Number(this.n1) * Number(this.n2);
break;
case '/':
return Number(this.n1) / Number(this.n2);
break;
}
}
}
})
</script>
</body>
</html>三，使用方法（methods）实现简易的计算器
3.1，<input>提供两个输入值， 使用v-model进行绑定
加上.number改变数字类型，要不然会变成字符串进行计算。
3.2，button1（），当按钮被点击时会执行该函数。函数中使用了一个switch语句，根据opt变量的不同值，分别执行加法、减法、乘法或除法，并将结果赋值给变量num3。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="num1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model.number="num2">
<button @click="button1">计算</button>
<input type="text" v-model.number="num3">
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
num1:0,
num2:0,
num3:0,
opt:'+',
},
methods:{
button1(){
switch(this.opt){
case '+':
this.num3=this.num1 + this.num2;
break;
case '-':
this.num3=this.num1 - this.num2;
break;
case '*':
this.num3=this.num1 * this.num2;
break;
case '/':
this.num3=this.num1 / this.num2;
break;
}
}
}
});
</script>
</html>四，使用侦听器（watch）实现计算器
4.1，HTML代码不变，两个输入数值的输入框和输出元素的表单，一个基础的vue实例化。
4.2 ，使用Vue.js的watch属性来监视数据的变化。 定义了三个监视器函数，分别监视n1，n2和opt属性。每当这些属性中的任何一个发生变化时，监视器函数将调用方法来重新计算结果，并更新数据属性中的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input id="input" type="text" v-model="n1" />
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="n2" />
<input type="text" v-model="result" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:null,
opt:'+'
},
methods:{
watch1(){
switch (this.opt) {
case '+':
this.result = Number(this.n1) + Number(this.n2);
break;
case '-':
this.result = Number(this.n1) - Number(this.n2);
break;
case '*':
this.result = Number(this.n1) * Number(this.n2);
break;
case '/':
this.result = Number(this.n1) / Number(this.n2);
break;
}
}
},
watch:{
n1:function(){
this.watch1()
},
n2:function(){
this.watch1()
},
opt:function(){
this.watch1()
}
},
created(){
this.watch1()
}
})
</script>
</body>
</html>总的来说，这些方法能。具体选择哪种方法取决于个人喜好和项目需求。计算属性适用于简单的计算，而监视器函数和方法的组合可以处理更加复杂的计算。
总结
到此这篇关于vue实现简易计算器的4种方法的文章就介绍到这了,更多相关vue简易计算器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！