使用Vue三种方法实现简单计算器

最新推荐文章于 2024-04-19 16:48:39 发布

咋一直没名了

最新推荐文章于 2024-04-19 16:48:39 发布

阅读量3.3k

点赞数 2

文章标签： vue.js 前端 javascript 学习

本文链接：https://blog.csdn.net/2201_75939414/article/details/129917435

版权

使用Vue三种方法实现简单计算器

代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。
以下是效果图
在这里插入图片描述
第一种：使用methods方法实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="number" placeholder="请输入数字" v-model.number="number1">
			<select v-model="pwd">
				<option>请选择符号</option>
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="number" placeholder="请输入数字"  v-model.number="number2" >
			<button @click="pd()">等于</button>
			<input type="text" v-model="result" placeholder="结果">
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				number1:'',
				number2:'',
				pwd:'请选择符号',
				result:''
			},
			methods:{
				pd(){
					switch (this.pwd){
						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>

1:首先，引入Vue.js库。在代码中使用了script 标签引入Vue.js文件
2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
3:使用v-model.number指令将输入框中的值绑定到number1和number2变量上，从而实现实时更新数据。使用.number修饰符将输入值转换为数字类型。
4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。

第二种：使用watch方法实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="number" placeholder="请输入数字" v-model.number="number1">
			<select v-model="pwd">
				<option>请选择符号</option>
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="number" placeholder="请输入数字"  v-model.number="number2" >
			<button @click="pd()">等于</button>
			<input type="text" v-model="result" placeholder="结果">
		</div>
	</body>
	<script>
    var vm=new Vue({
        el:"#app",
        data:{
			number1:0,
			number2:0,
			pwd:"+",
			result:0
        },
		computed:{
			add(){
				var num1 = this.number1
				var num2 = this.number2
				var num3 = this.pwd
				return{
					num1,
					num2,
					num3
                }
            }
        },
		watch:{
			add(val){
				switch(this.pwd){
					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>

在Vue实例中，通过watch属性监听add计算属性的变化，当add属性发生变化时，执行一个函数来计算结果。函数中通过switch语句根据pwd的值来选择不同的运算方式，最终将计算结果赋值给result属性。
第三种：使用computed实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="number" placeholder="请输入数字" v-model.number="number1">
			<select v-model="pwd">
				<option>请选择符号</option>
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="number" placeholder="请输入数字"  v-model.number="number2" >
			<button @click="pd()">等于</button>
			<input type="text" v-model="result" placeholder="结果">
		</div>
	</body>
	<script>
		var vm =new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				pwd:"+",
				result:0
			},
			computed:{
				pd(){
					switch(this.opt){
						case "+":
							this.result =parseInt(this.n1) + parseInt(this.n2)
							break;
						case "-":
							this.result =parseInt(this.n1) - parseInt(this.n2)
							break;
						case "*":
							this.result =parseInt(this.n1) * parseInt(this.n2)
							break;
						case "/":
							this.result =parseInt(this.n1) / parseInt(this.n2)
							break;
						}
					}
				},
			})
		</script>
</html>

通过computed属性定义了一个计算属性pd，该计算属性执行一个函数来计算结果。函数中通过switch语句根据pwd的值来选择不同的运算方式，最终将计算结果赋值给result属性。

咋一直没名了

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
使用Vue三种方法实现简单计算器

4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
复制链接

扫一扫