vue实现简易计算器的四种方法

这些方法都是基于Vue.js框架实现的，并且都能够实现计算器应用程序的功能。具体选择哪种方法取决于个人喜好和项目需求。计算属性适用于简单的计算，而监视器函数和方法的组合可以处理更加复杂的计算。

非必要不输出

2905人浏览 · 2023-04-01 21:07:35

非必要不输出 · 2023-04-01 21:07:35 发布

一，使用表达式实现计算器：

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^